| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| node-npmtest-gsap/ | 100% | (153 / 153) | 100% | (126 / 126) | 100% | (28 / 28) | 100% | (153 / 153) | |
| node-npmtest-gsap/node_modules/gsap/ | 10.96% | (1306 / 11914) | 4.77% | (578 / 12105) | 16.26% | (153 / 941) | 11.09% | (1286 / 11597) | |
| node-npmtest-gsap/node_modules/gsap/src/uncompressed/ | 6.43% | (380 / 5912) | 2.01% | (119 / 5930) | 7.89% | (37 / 469) | 6.62% | (379 / 5724) | |
| node-npmtest-gsap/node_modules/gsap/src/uncompressed/easing/ | 53.76% | (100 / 186) | 35.56% | (48 / 135) | 36.36% | (16 / 44) | 53.51% | (99 / 185) | |
| node-npmtest-gsap/node_modules/gsap/src/uncompressed/plugins/ | 17.27% | (120 / 695) | 13.7% | (100 / 730) | 35.71% | (25 / 70) | 16.23% | (111 / 684) | |
| node-npmtest-gsap/node_modules/gsap/src/uncompressed/utils/ | 0.52% | (8 / 1551) | 0.81% | (14 / 1728) | 3.57% | (4 / 112) | 0.45% | (7 / 1544) |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| example.js | 100% | (83 / 83) | 100% | (73 / 73) | 100% | (12 / 12) | 100% | (83 / 83) | |
| lib.npmtest_gsap.js | 100% | (16 / 16) | 100% | (14 / 14) | 100% | (3 / 3) | 100% | (16 / 16) | |
| test.js | 100% | (54 / 54) | 100% | (39 / 39) | 100% | (13 / 13) | 100% | (54 / 54) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 | 2 2 2 2 2 2 2 1 2 2 2 2 1 2 2 2 2 2 1 2 1 1 1 1 1 1 1 1 1 2 1 1 1 1 2 2 3 3 3 3 1 3 3 3 1 3 1 1 1 1 1 1 1 1 1 1 1 1 6 6 1 2 1 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*
example.js
quickstart example
instruction
1. save this script as example.js
2. run the shell command:
$ npm install npmtest-gsap && PORT=8081 node example.js
3. play with the browser-demo on http://127.0.0.1:8081
*/
/* istanbul instrument in package npmtest_gsap */
/*jslint
bitwise: true,
browser: true,
maxerr: 8,
maxlen: 96,
node: true,
nomen: true,
regexp: true,
stupid: true
*/
(function () {
'use strict';
var local;
// run shared js-env code - init-before
(function () {
// init local
local = {};
// init modeJs
local.modeJs = (function () {
try {
return typeof navigator.userAgent === 'string' &&
typeof document.querySelector('body') === 'object' &&
typeof XMLHttpRequest.prototype.open === 'function' &&
'browser';
} catch (errorCaughtBrowser) {
return module.exports &&
typeof process.versions.node === 'string' &&
typeof require('http').createServer === 'function' &&
'node';
}
}());
// init global
local.global = local.modeJs === 'browser'
? window
: global;
// init utility2_rollup
local = local.global.utility2_rollup || (local.modeJs === 'browser'
? local.global.utility2_npmtest_gsap
: global.utility2_moduleExports);
// export local
local.global.local = local;
}());
switch (local.modeJs) {
// init-after
// run browser js-env code - init-after
/* istanbul ignore next */
case 'browser':
local.testRunBrowser = function (event) {
Eif (!event || (event &&
event.currentTarget &&
event.currentTarget.className &&
event.currentTarget.className.includes &&
event.currentTarget.className.includes('onreset'))) {
// reset output
Array.from(
document.querySelectorAll('body > .resettable')
).forEach(function (element) {
switch (element.tagName) {
case 'INPUT':
case 'TEXTAREA':
element.value = '';
break;
default:
element.textContent = '';
}
});
}
switch (event && event.currentTarget && event.currentTarget.id) {
case 'testRunButton1':
// show tests
Eif (document.querySelector('#testReportDiv1').style.display === 'none') {
document.querySelector('#testReportDiv1').style.display = 'block';
document.querySelector('#testRunButton1').textContent =
'hide internal test';
local.modeTest = true;
local.testRunDefault(local);
// hide tests
} else {
document.querySelector('#testReportDiv1').style.display = 'none';
document.querySelector('#testRunButton1').textContent = 'run internal test';
}
break;
// custom-case
default:
break;
}
Iif (document.querySelector('#inputTextareaEval1') && (!event || (event &&
event.currentTarget &&
event.currentTarget.className &&
event.currentTarget.className.includes &&
event.currentTarget.className.includes('oneval')))) {
// try to eval input-code
try {
/*jslint evil: true*/
eval(document.querySelector('#inputTextareaEval1').value);
} catch (errorCaught) {
console.error(errorCaught);
}
}
};
// log stderr and stdout to #outputTextareaStdout1
['error', 'log'].forEach(function (key) {
console[key + '_original'] = console[key];
console[key] = function () {
var element;
console[key + '_original'].apply(console, arguments);
element = document.querySelector('#outputTextareaStdout1');
Iif (!element) {
return;
}
// append text to #outputTextareaStdout1
element.value += Array.from(arguments).map(function (arg) {
return typeof arg === 'string'
? arg
: JSON.stringify(arg, null, 4);
}).join(' ') + '\n';
// scroll textarea to bottom
element.scrollTop = element.scrollHeight;
};
});
// init event-handling
['change', 'click', 'keyup'].forEach(function (event) {
Array.from(document.querySelectorAll('.on' + event)).forEach(function (element) {
element.addEventListener(event, local.testRunBrowser);
});
});
// run tests
local.testRunBrowser();
break;
// run node js-env code - init-after
/* istanbul ignore next */
case 'node':
// export local
module.exports = local;
// require modules
local.fs = require('fs');
local.http = require('http');
local.url = require('url');
// init assets
local.assetsDict = local.assetsDict || {};
/* jslint-ignore-begin */
local.assetsDict['/assets.index.template.html'] = '\
<!doctype html>\n\
<html lang="en">\n\
<head>\n\
<meta charset="UTF-8">\n\
<meta name="viewport" content="width=device-width, initial-scale=1">\n\
<title>{{env.npm_package_name}} (v{{env.npm_package_version}})</title>\n\
<style>\n\
/*csslint\n\
box-sizing: false,\n\
universal-selector: false\n\
*/\n\
* {\n\
box-sizing: border-box;\n\
}\n\
body {\n\
background: #dde;\n\
font-family: Arial, Helvetica, sans-serif;\n\
margin: 2rem;\n\
}\n\
body > * {\n\
margin-bottom: 1rem;\n\
}\n\
.utility2FooterDiv {\n\
margin-top: 20px;\n\
text-align: center;\n\
}\n\
</style>\n\
<style>\n\
/*csslint\n\
*/\n\
textarea {\n\
font-family: monospace;\n\
height: 10rem;\n\
width: 100%;\n\
}\n\
textarea[readonly] {\n\
background: #ddd;\n\
}\n\
</style>\n\
</head>\n\
<body>\n\
<!-- utility2-comment\n\
<div id="ajaxProgressDiv1" style="background: #d00; height: 2px; left: 0; margin: 0; padding: 0; position: fixed; top: 0; transition: background 0.5s, width 1.5s; width: 25%;"></div>\n\
utility2-comment -->\n\
<h1>\n\
<!-- utility2-comment\n\
<a\n\
{{#if env.npm_package_homepage}}\n\
href="{{env.npm_package_homepage}}"\n\
{{/if env.npm_package_homepage}}\n\
target="_blank"\n\
>\n\
utility2-comment -->\n\
{{env.npm_package_name}} (v{{env.npm_package_version}})\n\
<!-- utility2-comment\n\
</a>\n\
utility2-comment -->\n\
</h1>\n\
<h3>{{env.npm_package_description}}</h3>\n\
<!-- utility2-comment\n\
<h4><a download href="assets.app.js">download standalone app</a></h4>\n\
<button class="onclick onreset" id="testRunButton1">run internal test</button><br>\n\
<div id="testReportDiv1" style="display: none;"></div>\n\
utility2-comment -->\n\
\n\
\n\
\n\
<label>stderr and stdout</label>\n\
<textarea class="resettable" id="outputTextareaStdout1" readonly></textarea>\n\
<!-- utility2-comment\n\
{{#if isRollup}}\n\
<script src="assets.app.js"></script>\n\
{{#unless isRollup}}\n\
utility2-comment -->\n\
<script src="assets.utility2.rollup.js"></script>\n\
<script src="jsonp.utility2._stateInit?callback=window.utility2._stateInit"></script>\n\
<script src="assets.npmtest_gsap.rollup.js"></script>\n\
<script src="assets.example.js"></script>\n\
<script src="assets.test.js"></script>\n\
<!-- utility2-comment\n\
{{/if isRollup}}\n\
utility2-comment -->\n\
<div class="utility2FooterDiv">\n\
[ this app was created with\n\
<a href="https://github.com/kaizhu256/node-utility2" target="_blank">utility2</a>\n\
]\n\
</div>\n\
</body>\n\
</html>\n\
';
/* jslint-ignore-end */
Iif (local.templateRender) {
local.assetsDict['/'] = local.templateRender(
local.assetsDict['/assets.index.template.html'],
{
env: local.objectSetDefault(local.env, {
npm_package_description: 'the greatest app in the world!',
npm_package_name: 'my-app',
npm_package_nameAlias: 'my_app',
npm_package_version: '0.0.1'
})
}
);
} else {
local.assetsDict['/'] = local.assetsDict['/assets.index.template.html']
.replace((/\{\{env\.(\w+?)\}\}/g), function (match0, match1) {
// jslint-hack
String(match0);
switch (match1) {
case 'npm_package_description':
return 'the greatest app in the world!';
case 'npm_package_name':
return 'my-app';
case 'npm_package_nameAlias':
return 'my_app';
case 'npm_package_version':
return '0.0.1';
}
});
}
// run the cli
Eif (local.global.utility2_rollup || module !== require.main) {
break;
}
local.assetsDict['/assets.example.js'] =
local.assetsDict['/assets.example.js'] ||
local.fs.readFileSync(__filename, 'utf8');
// bug-workaround - long $npm_package_buildCustomOrg
/* jslint-ignore-begin */
local.assetsDict['/assets.npmtest_gsap.rollup.js'] =
local.assetsDict['/assets.npmtest_gsap.rollup.js'] ||
local.fs.readFileSync(
local.npmtest_gsap.__dirname + '/lib.npmtest_gsap.js',
'utf8'
).replace((/^#!/), '//');
/* jslint-ignore-end */
local.assetsDict['/favicon.ico'] = local.assetsDict['/favicon.ico'] || '';
// if $npm_config_timeout_exit exists,
// then exit this process after $npm_config_timeout_exit ms
if (Number(process.env.npm_config_timeout_exit)) {
setTimeout(process.exit, Number(process.env.npm_config_timeout_exit));
}
// start server
if (local.global.utility2_serverHttp1) {
break;
}
process.env.PORT = process.env.PORT || '8081';
console.error('server starting on port ' + process.env.PORT);
local.http.createServer(function (request, response) {
request.urlParsed = local.url.parse(request.url);
if (local.assetsDict[request.urlParsed.pathname] !== undefined) {
response.end(local.assetsDict[request.urlParsed.pathname]);
return;
}
response.statusCode = 404;
response.end();
}).listen(process.env.PORT);
break;
}
}());
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2 2 2 2 2 2 2 1 2 2 2 2 1 1 1 1 | /* istanbul instrument in package npmtest_gsap */
/*jslint
bitwise: true,
browser: true,
maxerr: 8,
maxlen: 96,
node: true,
nomen: true,
regexp: true,
stupid: true
*/
(function () {
'use strict';
var local;
// run shared js-env code - init-before
(function () {
// init local
local = {};
// init modeJs
local.modeJs = (function () {
try {
return typeof navigator.userAgent === 'string' &&
typeof document.querySelector('body') === 'object' &&
typeof XMLHttpRequest.prototype.open === 'function' &&
'browser';
} catch (errorCaughtBrowser) {
return module.exports &&
typeof process.versions.node === 'string' &&
typeof require('http').createServer === 'function' &&
'node';
}
}());
// init global
local.global = local.modeJs === 'browser'
? window
: global;
// init utility2_rollup
local = local.global.utility2_rollup || local;
// init lib
local.local = local.npmtest_gsap = local;
// init exports
if (local.modeJs === 'browser') {
local.global.utility2_npmtest_gsap = local;
} else {
module.exports = local;
module.exports.__dirname = __dirname;
module.exports.module = module;
}
}());
}());
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | 2 2 2 2 2 2 2 1 2 2 1 1 1 1 2 2 2 2 1 1 2 2 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 1 2 2 1 2 2 1 2 2 1 1 1 1 1 | /* istanbul instrument in package npmtest_gsap */
/*jslint
bitwise: true,
browser: true,
maxerr: 8,
maxlen: 96,
node: true,
nomen: true,
regexp: true,
stupid: true
*/
(function () {
'use strict';
var local;
// run shared js-env code - init-before
(function () {
// init local
local = {};
// init modeJs
local.modeJs = (function () {
try {
return typeof navigator.userAgent === 'string' &&
typeof document.querySelector('body') === 'object' &&
typeof XMLHttpRequest.prototype.open === 'function' &&
'browser';
} catch (errorCaughtBrowser) {
return module.exports &&
typeof process.versions.node === 'string' &&
typeof require('http').createServer === 'function' &&
'node';
}
}());
// init global
local.global = local.modeJs === 'browser'
? window
: global;
switch (local.modeJs) {
// re-init local from window.local
case 'browser':
local = local.global.utility2.objectSetDefault(
local.global.utility2_rollup || local.global.local,
local.global.utility2
);
break;
// re-init local from example.js
case 'node':
local = (local.global.utility2_rollup || require('utility2'))
.requireReadme();
break;
}
// export local
local.global.local = local;
}());
// run shared js-env code - function
(function () {
return;
}());
switch (local.modeJs) {
// run browser js-env code - function
case 'browser':
break;
// run node js-env code - function
case 'node':
break;
}
// run shared js-env code - init-after
(function () {
return;
}());
switch (local.modeJs) {
// run browser js-env code - init-after
case 'browser':
local.testCase_browser_nullCase = local.testCase_browser_nullCase || function (
options,
onError
) {
/*
* this function will test browsers's null-case handling-behavior-behavior
*/
onError(null, options);
};
// run tests
local.nop(local.modeTest &&
document.querySelector('#testRunButton1') &&
document.querySelector('#testRunButton1').click());
break;
// run node js-env code - init-after
/* istanbul ignore next */
case 'node':
local.testCase_buildApidoc_default = local.testCase_buildApidoc_default || function (
options,
onError
) {
/*
* this function will test buildApidoc's default handling-behavior-behavior
*/
options = { modulePathList: module.paths };
local.buildApidoc(options, onError);
};
local.testCase_buildApp_default = local.testCase_buildApp_default || function (
options,
onError
) {
/*
* this function will test buildApp's default handling-behavior-behavior
*/
local.testCase_buildReadme_default(options, local.onErrorThrow);
local.testCase_buildLib_default(options, local.onErrorThrow);
local.testCase_buildTest_default(options, local.onErrorThrow);
local.testCase_buildCustomOrg_default(options, local.onErrorThrow);
options = [];
local.buildApp(options, onError);
};
local.testCase_buildCustomOrg_default = local.testCase_buildCustomOrg_default ||
function (options, onError) {
/*
* this function will test buildCustomOrg's default handling-behavior
*/
options = {};
local.buildCustomOrg(options, onError);
};
local.testCase_buildLib_default = local.testCase_buildLib_default || function (
options,
onError
) {
/*
* this function will test buildLib's default handling-behavior
*/
options = {};
local.buildLib(options, onError);
};
local.testCase_buildReadme_default = local.testCase_buildReadme_default || function (
options,
onError
) {
/*
* this function will test buildReadme's default handling-behavior-behavior
*/
options = {};
local.buildReadme(options, onError);
};
local.testCase_buildTest_default = local.testCase_buildTest_default || function (
options,
onError
) {
/*
* this function will test buildTest's default handling-behavior
*/
options = {};
local.buildTest(options, onError);
};
local.testCase_webpage_default = local.testCase_webpage_default || function (
options,
onError
) {
/*
* this function will test webpage's default handling-behavior
*/
options = { modeCoverageMerge: true, url: local.serverLocalHost + '?modeTest=1' };
local.browserTest(options, onError);
};
// run test-server
local.testRunServer(local);
break;
}
}());
|
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| AttrPlugin.js | 52.17% | (12 / 23) | 48% | (12 / 25) | 75% | (3 / 4) | 50% | (11 / 22) | |
| BezierPlugin.js | 4.79% | (19 / 397) | 4.44% | (12 / 270) | 16.67% | (3 / 18) | 4.6% | (18 / 391) | |
| CSSPlugin.js | 8.91% | (147 / 1650) | 4.1% | (72 / 1754) | 16.67% | (15 / 90) | 9.04% | (146 / 1615) | |
| CSSRulePlugin.js | 44.44% | (24 / 54) | 30.77% | (12 / 39) | 62.5% | (5 / 8) | 43.4% | (23 / 53) | |
| ColorPropsPlugin.js | 16.28% | (21 / 129) | 11.93% | (13 / 109) | 30% | (3 / 10) | 15.63% | (20 / 128) | |
| DirectionalRotationPlugin.js | 24% | (12 / 50) | 18.46% | (12 / 65) | 60% | (3 / 5) | 22.45% | (11 / 49) | |
| Draggable.js | 0.52% | (8 / 1551) | 0.81% | (14 / 1728) | 3.57% | (4 / 112) | 0.45% | (7 / 1544) | |
| EasePack.js | 53.76% | (100 / 186) | 35.56% | (48 / 135) | 36.36% | (16 / 44) | 53.51% | (99 / 185) | |
| EaselPlugin.js | 7.83% | (13 / 166) | 7.27% | (12 / 165) | 23.08% | (3 / 13) | 7.32% | (12 / 164) | |
| EndArrayPlugin.js | 18.52% | (5 / 27) | 26.09% | (6 / 23) | 25% | (1 / 4) | 15.38% | (4 / 26) | |
| ModifiersPlugin.js | 16.3% | (15 / 92) | 16.13% | (15 / 93) | 33.33% | (3 / 9) | 15.56% | (14 / 90) | |
| RaphaelPlugin.js | 3.19% | (6 / 188) | 2.86% | (6 / 210) | 12.5% | (1 / 8) | 2.86% | (5 / 175) | |
| RoundPropsPlugin.js | 17.5% | (7 / 40) | 19.35% | (6 / 31) | 20% | (1 / 5) | 15.38% | (6 / 39) | |
| ScrollToPlugin.js | 5.21% | (5 / 96) | 4.41% | (6 / 136) | 8.33% | (1 / 12) | 4.21% | (4 / 95) | |
| TextPlugin.js | 18.06% | (13 / 72) | 13.79% | (12 / 87) | 50% | (3 / 6) | 16.9% | (12 / 71) | |
| TimelineLite.js | 15.21% | (73 / 480) | 3.59% | (17 / 474) | 14% | (7 / 50) | 15.55% | (72 / 463) | |
| TimelineMax.js | 10.49% | (84 / 801) | 1.44% | (12 / 831) | 6.76% | (5 / 74) | 10.88% | (83 / 763) | |
| TweenLite.js | 0.34% | (4 / 1174) | 0.49% | (6 / 1228) | 1.01% | (1 / 99) | 0.35% | (4 / 1127) | |
| TweenMax.js | 15.87% | (737 / 4644) | 6.18% | (285 / 4610) | 21.01% | (75 / 357) | 16.3% | (734 / 4503) | |
| jquery.gsap.js | 1.06% | (1 / 94) | 0% | (0 / 92) | 0% | (0 / 13) | 1.06% | (1 / 94) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.6.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine.plugin({ propName: "attr", API: 2, version: "0.6.0", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var p, end; if (typeof(target.setAttribute) !== "function") { return false; } for (p in value) { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } this._addTween(target, "setAttribute", target.getAttribute(p) + "", end + "", p, false, p); this._overwriteProps.push(p); } return true; } }); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("AttrPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 1.3.7 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _RAD2DEG = 180 / Math.PI, _r1 = [], _r2 = [], _r3 = [], _corProps = {}, _globals = _gsScope._gsDefine.globals, Segment = function(a, b, c, d) { if (c === d) { //if c and d match, the final autoRotate value could lock at -90 degrees, so differentiate them slightly. c = d - (d - b) / 1000000; } if (a === b) { //if a and b match, the starting autoRotate value could lock at -90 degrees, so differentiate them slightly. b = a + (c - a) / 1000000; } this.a = a; this.b = b; this.c = c; this.d = d; this.da = d - a; this.ca = c - a; this.ba = b - a; }, _correlate = ",x,y,z,left,top,right,bottom,marginTop,marginLeft,marginRight,marginBottom,paddingLeft,paddingTop,paddingRight,paddingBottom,backgroundPosition,backgroundPosition_y,", cubicToQuadratic = function(a, b, c, d) { var q1 = {a:a}, q2 = {}, q3 = {}, q4 = {c:d}, mab = (a + b) / 2, mbc = (b + c) / 2, mcd = (c + d) / 2, mabc = (mab + mbc) / 2, mbcd = (mbc + mcd) / 2, m8 = (mbcd - mabc) / 8; q1.b = mab + (a - mab) / 4; q2.b = mabc + m8; q1.c = q2.a = (q1.b + q2.b) / 2; q2.c = q3.a = (mabc + mbcd) / 2; q3.b = mbcd - m8; q4.b = mcd + (d - mcd) / 4; q3.c = q4.a = (q3.b + q4.b) / 2; return [q1, q2, q3, q4]; }, _calculateControlPoints = function(a, curviness, quad, basic, correlate) { var l = a.length - 1, ii = 0, cp1 = a[0].a, i, p1, p2, p3, seg, m1, m2, mm, cp2, qb, r1, r2, tl; for (i = 0; i < l; i++) { seg = a[ii]; p1 = seg.a; p2 = seg.d; p3 = a[ii+1].d; if (correlate) { r1 = _r1[i]; r2 = _r2[i]; tl = ((r2 + r1) * curviness * 0.25) / (basic ? 0.5 : _r3[i] || 0.5); m1 = p2 - (p2 - p1) * (basic ? curviness * 0.5 : (r1 !== 0 ? tl / r1 : 0)); m2 = p2 + (p3 - p2) * (basic ? curviness * 0.5 : (r2 !== 0 ? tl / r2 : 0)); mm = p2 - (m1 + (((m2 - m1) * ((r1 * 3 / (r1 + r2)) + 0.5) / 4) || 0)); } else { m1 = p2 - (p2 - p1) * curviness * 0.5; m2 = p2 + (p3 - p2) * curviness * 0.5; mm = p2 - (m1 + m2) / 2; } m1 += mm; m2 += mm; seg.c = cp2 = m1; if (i !== 0) { seg.b = cp1; } else { seg.b = cp1 = seg.a + (seg.c - seg.a) * 0.6; //instead of placing b on a exactly, we move it inline with c so that if the user specifies an ease like Back.easeIn or Elastic.easeIn which goes BEYOND the beginning, it will do so smoothly. } seg.da = p2 - p1; seg.ca = cp2 - p1; seg.ba = cp1 - p1; if (quad) { qb = cubicToQuadratic(p1, cp1, cp2, p2); a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]); ii += 4; } else { ii++; } cp1 = m2; } seg = a[ii]; seg.b = cp1; seg.c = cp1 + (seg.d - cp1) * 0.4; //instead of placing c on d exactly, we move it inline with b so that if the user specifies an ease like Back.easeOut or Elastic.easeOut which goes BEYOND the end, it will do so smoothly. seg.da = seg.d - seg.a; seg.ca = seg.c - seg.a; seg.ba = cp1 - seg.a; if (quad) { qb = cubicToQuadratic(seg.a, cp1, seg.c, seg.d); a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]); } }, _parseAnchors = function(values, p, correlate, prepend) { var a = [], l, i, p1, p2, p3, tmp; if (prepend) { values = [prepend].concat(values); i = values.length; while (--i > -1) { if (typeof( (tmp = values[i][p]) ) === "string") if (tmp.charAt(1) === "=") { values[i][p] = prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)); //accommodate relative values. Do it inline instead of breaking it out into a function for speed reasons } } } l = values.length - 2; if (l < 0) { a[0] = new Segment(values[0][p], 0, 0, values[0][p]); return a; } for (i = 0; i < l; i++) { p1 = values[i][p]; p2 = values[i+1][p]; a[i] = new Segment(p1, 0, 0, p2); if (correlate) { p3 = values[i+2][p]; _r1[i] = (_r1[i] || 0) + (p2 - p1) * (p2 - p1); _r2[i] = (_r2[i] || 0) + (p3 - p2) * (p3 - p2); } } a[i] = new Segment(values[i][p], 0, 0, values[i+1][p]); return a; }, bezierThrough = function(values, curviness, quadratic, basic, correlate, prepend) { var obj = {}, props = [], first = prepend || values[0], i, p, a, j, r, l, seamless, last; correlate = (typeof(correlate) === "string") ? ","+correlate+"," : _correlate; if (curviness == null) { curviness = 1; } for (p in values[0]) { props.push(p); } //check to see if the last and first values are identical (well, within 0.05). If so, make seamless by appending the second element to the very end of the values array and the 2nd-to-last element to the very beginning (we'll remove those segments later) if (values.length > 1) { last = values[values.length - 1]; seamless = true; i = props.length; while (--i > -1) { p = props[i]; if (Math.abs(first[p] - last[p]) > 0.05) { //build in a tolerance of +/-0.05 to accommodate rounding errors. seamless = false; break; } } if (seamless) { values = values.concat(); //duplicate the array to avoid contaminating the original which the user may be reusing for other tweens if (prepend) { values.unshift(prepend); } values.push(values[1]); prepend = values[values.length - 3]; } } _r1.length = _r2.length = _r3.length = 0; i = props.length; while (--i > -1) { p = props[i]; _corProps[p] = (correlate.indexOf(","+p+",") !== -1); obj[p] = _parseAnchors(values, p, _corProps[p], prepend); } i = _r1.length; while (--i > -1) { _r1[i] = Math.sqrt(_r1[i]); _r2[i] = Math.sqrt(_r2[i]); } if (!basic) { i = props.length; while (--i > -1) { if (_corProps[p]) { a = obj[props[i]]; l = a.length - 1; for (j = 0; j < l; j++) { r = (a[j+1].da / _r2[j] + a[j].da / _r1[j]) || 0; _r3[j] = (_r3[j] || 0) + r * r; } } } i = _r3.length; while (--i > -1) { _r3[i] = Math.sqrt(_r3[i]); } } i = props.length; j = quadratic ? 4 : 1; while (--i > -1) { p = props[i]; a = obj[p]; _calculateControlPoints(a, curviness, quadratic, basic, _corProps[p]); //this method requires that _parseAnchors() and _setSegmentRatios() ran first so that _r1, _r2, and _r3 values are populated for all properties if (seamless) { a.splice(0, j); a.splice(a.length - j, j); } } return obj; }, _parseBezierData = function(values, type, prepend) { type = type || "soft"; var obj = {}, inc = (type === "cubic") ? 3 : 2, soft = (type === "soft"), props = [], a, b, c, d, cur, i, j, l, p, cnt, tmp; if (soft && prepend) { values = [prepend].concat(values); } if (values == null || values.length < inc + 1) { throw "invalid Bezier data"; } for (p in values[0]) { props.push(p); } i = props.length; while (--i > -1) { p = props[i]; obj[p] = cur = []; cnt = 0; l = values.length; for (j = 0; j < l; j++) { a = (prepend == null) ? values[j][p] : (typeof( (tmp = values[j][p]) ) === "string" && tmp.charAt(1) === "=") ? prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)) : Number(tmp); if (soft) if (j > 1) if (j < l - 1) { cur[cnt++] = (a + cur[cnt-2]) / 2; } cur[cnt++] = a; } l = cnt - inc + 1; cnt = 0; for (j = 0; j < l; j += inc) { a = cur[j]; b = cur[j+1]; c = cur[j+2]; d = (inc === 2) ? 0 : cur[j+3]; cur[cnt++] = tmp = (inc === 3) ? new Segment(a, b, c, d) : new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c); } cur.length = cnt; } return obj; }, _addCubicLengths = function(a, steps, resolution) { var inc = 1 / resolution, j = a.length, d, d1, s, da, ca, ba, p, i, inv, bez, index; while (--j > -1) { bez = a[j]; s = bez.a; da = bez.d - s; ca = bez.c - s; ba = bez.b - s; d = d1 = 0; for (i = 1; i <= resolution; i++) { p = inc * i; inv = 1 - p; d = d1 - (d1 = (p * p * da + 3 * inv * (p * ca + inv * ba)) * p); index = j * resolution + i - 1; steps[index] = (steps[index] || 0) + d * d; } } }, _parseLengthData = function(obj, resolution) { resolution = resolution >> 0 || 6; var a = [], lengths = [], d = 0, total = 0, threshold = resolution - 1, segments = [], curLS = [], //current length segments array p, i, l, index; for (p in obj) { _addCubicLengths(obj[p], a, resolution); } l = a.length; for (i = 0; i < l; i++) { d += Math.sqrt(a[i]); index = i % resolution; curLS[index] = d; if (index === threshold) { total += d; index = (i / resolution) >> 0; segments[index] = curLS; lengths[index] = total; d = 0; curLS = []; } } return {length:total, lengths:lengths, segments:segments}; }, BezierPlugin = _gsScope._gsDefine.plugin({ propName: "bezier", priority: -1, version: "1.3.7", API: 2, global:true, //gets called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, vars, tween) { this._target = target; if (vars instanceof Array) { vars = {values:vars}; } this._func = {}; this._mod = {}; this._props = []; this._timeRes = (vars.timeResolution == null) ? 6 : parseInt(vars.timeResolution, 10); var values = vars.values || [], first = {}, second = values[0], autoRotate = vars.autoRotate || tween.vars.orientToBezier, p, isFunc, i, j, prepend; this._autoRotate = autoRotate ? (autoRotate instanceof Array) ? autoRotate : [["x","y","rotation",((autoRotate === true) ? 0 : Number(autoRotate) || 0)]] : null; for (p in second) { this._props.push(p); } i = this._props.length; while (--i > -1) { p = this._props[i]; this._overwriteProps.push(p); isFunc = this._func[p] = (typeof(target[p]) === "function"); first[p] = (!isFunc) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ](); if (!prepend) if (first[p] !== values[0][p]) { prepend = first; } } this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate, prepend) : _parseBezierData(values, vars.type, first); this._segCount = this._beziers[p].length; if (this._timeRes) { var ld = _parseLengthData(this._beziers, this._timeRes); this._length = ld.length; this._lengths = ld.lengths; this._segments = ld.segments; this._l1 = this._li = this._s1 = this._si = 0; this._l2 = this._lengths[0]; this._curSeg = this._segments[0]; this._s2 = this._curSeg[0]; this._prec = 1 / this._curSeg.length; } if ((autoRotate = this._autoRotate)) { this._initialRotations = []; if (!(autoRotate[0] instanceof Array)) { this._autoRotate = autoRotate = [autoRotate]; } i = autoRotate.length; while (--i > -1) { for (j = 0; j < 3; j++) { p = autoRotate[i][j]; this._func[p] = (typeof(target[p]) === "function") ? target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ] : false; } p = autoRotate[i][2]; this._initialRotations[i] = (this._func[p] ? this._func[p].call(this._target) : this._target[p]) || 0; this._overwriteProps.push(p); } } this._startRatio = tween.vars.runBackwards ? 1 : 0; //we determine the starting ratio when the tween inits which is always 0 unless the tween has runBackwards:true (indicating it's a from() tween) in which case it's 1. return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var segments = this._segCount, func = this._func, target = this._target, notStart = (v !== this._startRatio), curIndex, inv, i, p, b, t, val, l, lengths, curSeg; if (!this._timeRes) { curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0; t = (v - (curIndex * (1 / segments))) * segments; } else { lengths = this._lengths; curSeg = this._curSeg; v *= this._length; i = this._li; //find the appropriate segment (if the currently cached one isn't correct) if (v > this._l2 && i < segments - 1) { l = segments - 1; while (i < l && (this._l2 = lengths[++i]) <= v) { } this._l1 = lengths[i-1]; this._li = i; this._curSeg = curSeg = this._segments[i]; this._s2 = curSeg[(this._s1 = this._si = 0)]; } else if (v < this._l1 && i > 0) { while (i > 0 && (this._l1 = lengths[--i]) >= v) { } if (i === 0 && v < this._l1) { this._l1 = 0; } else { i++; } this._l2 = lengths[i]; this._li = i; this._curSeg = curSeg = this._segments[i]; this._s1 = curSeg[(this._si = curSeg.length - 1) - 1] || 0; this._s2 = curSeg[this._si]; } curIndex = i; //now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one) v -= this._l1; i = this._si; if (v > this._s2 && i < curSeg.length - 1) { l = curSeg.length - 1; while (i < l && (this._s2 = curSeg[++i]) <= v) { } this._s1 = curSeg[i-1]; this._si = i; } else if (v < this._s1 && i > 0) { while (i > 0 && (this._s1 = curSeg[--i]) >= v) { } if (i === 0 && v < this._s1) { this._s1 = 0; } else { i++; } this._s2 = curSeg[i]; this._si = i; } t = ((i + (v - this._s1) / (this._s2 - this._s1)) * this._prec) || 0; } inv = 1 - t; i = this._props.length; while (--i > -1) { p = this._props[i]; b = this._beziers[p][curIndex]; val = (t * t * b.da + 3 * inv * (t * b.ca + inv * b.ba)) * t + b.a; if (this._mod[p]) { val = this._mod[p](val, target); } if (func[p]) { target[p](val); } else { target[p] = val; } } if (this._autoRotate) { var ar = this._autoRotate, b2, x1, y1, x2, y2, add, conv; i = ar.length; while (--i > -1) { p = ar[i][2]; add = ar[i][3] || 0; conv = (ar[i][4] === true) ? 1 : _RAD2DEG; b = this._beziers[ar[i][0]]; b2 = this._beziers[ar[i][1]]; if (b && b2) { //in case one of the properties got overwritten. b = b[curIndex]; b2 = b2[curIndex]; x1 = b.a + (b.b - b.a) * t; x2 = b.b + (b.c - b.b) * t; x1 += (x2 - x1) * t; x2 += ((b.c + (b.d - b.c) * t) - x2) * t; y1 = b2.a + (b2.b - b2.a) * t; y2 = b2.b + (b2.c - b2.b) * t; y1 += (y2 - y1) * t; y2 += ((b2.c + (b2.d - b2.c) * t) - y2) * t; val = notStart ? Math.atan2(y2 - y1, x2 - x1) * conv + add : this._initialRotations[i]; if (this._mod[p]) { val = this._mod[p](val, target); //for modProps } if (func[p]) { target[p](val); } else { target[p] = val; } } } } } }), p = BezierPlugin.prototype; BezierPlugin.bezierThrough = bezierThrough; BezierPlugin.cubicToQuadratic = cubicToQuadratic; BezierPlugin._autoCSS = true; //indicates that this plugin can be inserted into the "css" object using the autoCSS feature of TweenLite BezierPlugin.quadraticToCubic = function(a, b, c) { return new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c); }; BezierPlugin._cssRegister = function() { var CSSPlugin = _globals.CSSPlugin; if (!CSSPlugin) { return; } var _internals = CSSPlugin._internals, _parseToProxy = _internals._parseToProxy, _setPluginRatio = _internals._setPluginRatio, CSSPropTween = _internals.CSSPropTween; _internals._registerComplexSpecialProp("bezier", {parser:function(t, e, prop, cssp, pt, plugin) { if (e instanceof Array) { e = {values:e}; } plugin = new BezierPlugin(); var values = e.values, l = values.length - 1, pluginValues = [], v = {}, i, p, data; if (l < 0) { return pt; } for (i = 0; i <= l; i++) { data = _parseToProxy(t, values[i], cssp, pt, plugin, (l !== i)); pluginValues[i] = data.end; } for (p in e) { v[p] = e[p]; //duplicate the vars object because we need to alter some things which would cause problems if the user plans to reuse the same vars object for another tween. } v.values = pluginValues; pt = new CSSPropTween(t, "bezier", 0, 0, data.pt, 2); pt.data = data; pt.plugin = plugin; pt.setRatio = _setPluginRatio; if (v.autoRotate === 0) { v.autoRotate = true; } if (v.autoRotate && !(v.autoRotate instanceof Array)) { i = (v.autoRotate === true) ? 0 : Number(v.autoRotate); v.autoRotate = (data.end.left != null) ? [["left","top","rotation",i,false]] : (data.end.x != null) ? [["x","y","rotation",i,false]] : false; } if (v.autoRotate) { if (!cssp._transform) { cssp._enableTransforms(false); } data.autoRotate = cssp._target._gsTransform; data.proxy.rotation = data.autoRotate.rotation || 0; cssp._overwriteProps.push("rotation"); } plugin._onInitTween(data.proxy, v, cssp._tween); return pt; }}); }; p._mod = function(lookup) { var op = this._overwriteProps, i = op.length, val; while (--i > -1) { val = lookup[op[i]]; if (val && typeof(val) === "function") { this._mod[op[i]] = val; } } }; p._kill = function(lookup) { var a = this._props, p, i; for (p in this._beziers) { if (p in lookup) { delete this._beziers[p]; delete this._func[p]; i = a.length; while (--i > -1) { if (a[i] === p) { a.splice(i, 1); } } } } a = this._autoRotate; if (a) { i = a.length; while (--i > -1) { if (lookup[a[i][2]]) { a.splice(i, 1); } } } return this._super._kill.call(this, lookup); }; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("BezierPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 | 1 1 1 1 2 2 2 1 1 1 1 1 1 1 1 1 3 3 1 1 1 1 1 1 1 1 12 12 12 12 12 12 12 12 12 1 20 1 1 1 1 55 45 10 10 10 2 2 8 8 3 3 1 1 1 8 8 1 1 1 1 61 61 61 61 61 53 61 61 61 61 61 26 26 26 26 61 61 61 4 4 4 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 4 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 1.19.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("plugins.CSSPlugin", ["plugins.TweenPlugin","TweenLite"], function(TweenPlugin, TweenLite) { /** @constructor **/ var CSSPlugin = function() { TweenPlugin.call(this, "css"); this._overwriteProps.length = 0; this.setRatio = CSSPlugin.prototype.setRatio; //speed optimization (avoid prototype lookup on this "hot" method) }, _globals = _gsScope._gsDefine.globals, _hasPriority, //turns true whenever a CSSPropTween instance is created that has a priority other than 0. This helps us discern whether or not we should spend the time organizing the linked list or not after a CSSPlugin's _onInitTween() method is called. _suffixMap, //we set this in _onInitTween() each time as a way to have a persistent variable we can use in other methods like _parse() without having to pass it around as a parameter and we keep _parse() decoupled from a particular CSSPlugin instance _cs, //computed style (we store this in a shared variable to conserve memory and make minification tighter _overwriteProps, //alias to the currently instantiating CSSPlugin's _overwriteProps array. We use this closure in order to avoid having to pass a reference around from method to method and aid in minification. _specialProps = {}, p = CSSPlugin.prototype = new TweenPlugin("css"); p.constructor = CSSPlugin; CSSPlugin.version = "1.19.1"; CSSPlugin.API = 2; CSSPlugin.defaultTransformPerspective = 0; CSSPlugin.defaultSkewType = "compensated"; CSSPlugin.defaultSmoothOrigin = true; p = "px"; //we'll reuse the "p" variable to keep file size down CSSPlugin.suffixMap = {top:p, right:p, bottom:p, left:p, width:p, height:p, fontSize:p, padding:p, margin:p, perspective:p, lineHeight:""}; var _numExp = /(?:\-|\.|\b)(\d|\.|e\-)+/g, _relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g, _valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)" _NaNExp = /(?![+-]?\d*\.?\d+|[+-]|e[+-]\d+)[^0-9]/g, //also allows scientific notation and doesn't kill the leading -/+ in -= and += _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g, _opacityExp = /opacity *= *([^)]*)/i, _opacityValExp = /opacity:([^;]*)/i, _alphaFilterExp = /alpha\(opacity *=.+?\)/i, _rgbhslExp = /^(rgb|hsl)/, _capsExp = /([A-Z])/g, _camelExp = /-([a-z])/gi, _urlExp = /(^(?:url\(\"|url\())|(?:(\"\))$|\)$)/gi, //for pulling out urls from url(...) or url("...") strings (some browsers wrap urls in quotes, some don't when reporting things like backgroundImage) _camelFunc = function(s, g) { return g.toUpperCase(); }, _horizExp = /(?:Left|Right|Width)/i, _ieGetMatrixExp = /(M11|M12|M21|M22)=[\d\-\.e]+/gi, _ieSetMatrixExp = /progid\:DXImageTransform\.Microsoft\.Matrix\(.+?\)/i, _commasOutsideParenExp = /,(?=[^\)]*(?:\(|$))/gi, //finds any commas that are not within parenthesis _complexExp = /[\s,\(]/i, //for testing a string to find if it has a space, comma, or open parenthesis (clues that it's a complex value) _DEG2RAD = Math.PI / 180, _RAD2DEG = 180 / Math.PI, _forcePT = {}, _dummyElement = {style:{}}, _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, _createElement = function(type, ns) { return _doc.createElementNS ? _doc.createElementNS(ns || "http://www.w3.org/1999/xhtml", type) : _doc.createElement(type); }, _tempDiv = _createElement("div"), _tempImg = _createElement("img"), _internals = CSSPlugin._internals = {_specialProps:_specialProps}, //provides a hook to a few internal methods that we need to access from inside other plugins _agent = (_gsScope.navigator || {}).userAgent || "", _autoRound, _reqSafariFix, //we won't apply the Safari transform fix until we actually come across a tween that affects a transform property (to maintain best performance). _isSafari, _isFirefox, //Firefox has a bug that causes 3D transformed elements to randomly disappear unless a repaint is forced after each update on each element. _isSafariLT6, //Safari (and Android 4 which uses a flavor of Safari) has a bug that prevents changes to "top" and "left" properties from rendering properly if changed on the same frame as a transform UNLESS we set the element's WebkitBackfaceVisibility to hidden (weird, I know). Doing this for Android 3 and earlier seems to actually cause other problems, though (fun!) _ieVers, _supportsOpacity = (function() { //we set _isSafari, _ieVers, _isFirefox, and _supportsOpacity all in one function here to reduce file size slightly, especially in the minified version. var i = _agent.indexOf("Android"), a = _createElement("a"); _isSafari = (_agent.indexOf("Safari") !== -1 && _agent.indexOf("Chrome") === -1 && (i === -1 || parseFloat(_agent.substr(i+8, 2)) > 3)); _isSafariLT6 = (_isSafari && (parseFloat(_agent.substr(_agent.indexOf("Version/")+8, 2)) < 6)); _isFirefox = (_agent.indexOf("Firefox") !== -1); Iif ((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(_agent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(_agent)) { _ieVers = parseFloat( RegExp.$1 ); } Iif (!a) { return false; } a.style.cssText = "top:1px;opacity:.55;"; return /^0.55/.test(a.style.opacity); }()), _getIEOpacity = function(v) { return (_opacityExp.test( ((typeof(v) === "string") ? v : (v.currentStyle ? v.currentStyle.filter : v.style.filter) || "") ) ? ( parseFloat( RegExp.$1 ) / 100 ) : 1); }, _log = function(s) {//for logging messages, but in a way that won't throw errors in old versions of IE. if (_gsScope.console) { console.log(s); } }, _target, //when initting a CSSPlugin, we set this variable so that we can access it from within many other functions without having to pass it around as params _index, //when initting a CSSPlugin, we set this variable so that we can access it from within many other functions without having to pass it around as params _prefixCSS = "", //the non-camelCase vendor prefix like "-o-", "-moz-", "-ms-", or "-webkit-" _prefix = "", //camelCase vendor prefix like "O", "ms", "Webkit", or "Moz". // @private feed in a camelCase property name like "transform" and it will check to see if it is valid as-is or if it needs a vendor prefix. It returns the corrected camelCase property name (i.e. "WebkitTransform" or "MozTransform" or "transform" or null if no such property is found, like if the browser is IE8 or before, "transform" won't be found at all) _checkPropPrefix = function(p, e) { e = e || _tempDiv; var s = e.style, a, i; Iif (s[p] !== undefined) { return p; } p = p.charAt(0).toUpperCase() + p.substr(1); a = ["O","Moz","ms","Ms","Webkit"]; i = 5; while (--i > -1 && s[a[i]+p] === undefined) { } Iif (i >= 0) { _prefix = (i === 3) ? "ms" : a[i]; _prefixCSS = "-" + _prefix.toLowerCase() + "-"; return _prefix + p; } return null; }, _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : function() {}, /** * @private Returns the css style for a particular property of an element. For example, to get whatever the current "left" css value for an element with an ID of "myElement", you could do: * var currentLeft = CSSPlugin.getStyle( document.getElementById("myElement"), "left"); * * @param {!Object} t Target element whose style property you want to query * @param {!string} p Property name (like "left" or "top" or "marginTop", etc.) * @param {Object=} cs Computed style object. This just provides a way to speed processing if you're going to get several properties on the same element in quick succession - you can reuse the result of the getComputedStyle() call. * @param {boolean=} calc If true, the value will not be read directly from the element's "style" property (if it exists there), but instead the getComputedStyle() result will be used. This can be useful when you want to ensure that the browser itself is interpreting the value. * @param {string=} dflt Default value that should be returned in the place of null, "none", "auto" or "auto auto". * @return {?string} The current property value */ _getStyle = CSSPlugin.getStyle = function(t, p, cs, calc, dflt) { var rv; if (!_supportsOpacity) if (p === "opacity") { //several versions of IE don't use the standard "opacity" property - they use things like filter:alpha(opacity=50), so we parse that here. return _getIEOpacity(t); } if (!calc && t.style[p]) { rv = t.style[p]; } else if ((cs = cs || _getComputedStyle(t))) { rv = cs[p] || cs.getPropertyValue(p) || cs.getPropertyValue(p.replace(_capsExp, "-$1").toLowerCase()); } else if (t.currentStyle) { rv = t.currentStyle[p]; } return (dflt != null && (!rv || rv === "none" || rv === "auto" || rv === "auto auto")) ? dflt : rv; }, /** * @private Pass the target element, the property name, the numeric value, and the suffix (like "%", "em", "px", etc.) and it will spit back the equivalent pixel number. * @param {!Object} t Target element * @param {!string} p Property name (like "left", "top", "marginLeft", etc.) * @param {!number} v Value * @param {string=} sfx Suffix (like "px" or "%" or "em") * @param {boolean=} recurse If true, the call is a recursive one. In some browsers (like IE7/8), occasionally the value isn't accurately reported initially, but if we run the function again it will take effect. * @return {number} value in pixels */ _convertToPixels = _internals.convertToPixels = function(t, p, v, sfx, recurse) { if (sfx === "px" || !sfx) { return v; } if (sfx === "auto" || !v) { return 0; } var horiz = _horizExp.test(p), node = t, style = _tempDiv.style, neg = (v < 0), precise = (v === 1), pix, cache, time; if (neg) { v = -v; } if (precise) { v *= 100; } if (sfx === "%" && p.indexOf("border") !== -1) { pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight); } else { style.cssText = "border:0 solid red;position:" + _getStyle(t, "position") + ";line-height:0;"; if (sfx === "%" || !node.appendChild || sfx.charAt(0) === "v" || sfx === "rem") { node = t.parentNode || _doc.body; cache = node._gsCache; time = TweenLite.ticker.frame; if (cache && horiz && cache.time === time) { //performance optimization: we record the width of elements along with the ticker frame so that we can quickly get it again on the same tick (seems relatively safe to assume it wouldn't change on the same tick) return cache.width * v / 100; } style[(horiz ? "width" : "height")] = v + sfx; } else { style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx; } node.appendChild(_tempDiv); pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]); node.removeChild(_tempDiv); if (horiz && sfx === "%" && CSSPlugin.cacheWidths !== false) { cache = node._gsCache = node._gsCache || {}; cache.time = time; cache.width = pix / v * 100; } if (pix === 0 && !recurse) { pix = _convertToPixels(t, p, v, sfx, true); } } if (precise) { pix /= 100; } return neg ? -pix : pix; }, _calculateOffset = _internals.calculateOffset = function(t, p, cs) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop if (_getStyle(t, "position", cs) !== "absolute") { return 0; } var dim = ((p === "left") ? "Left" : "Top"), v = _getStyle(t, "margin" + dim, cs); return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), v.replace(_suffixExp, "")) || 0); }, // @private returns at object containing ALL of the style properties in camelCase and their associated values. _getAllStyles = function(t, cs) { var s = {}, i, tr, p; if ((cs = cs || _getComputedStyle(t, null))) { if ((i = cs.length)) { while (--i > -1) { p = cs[i]; if (p.indexOf("-transform") === -1 || _transformPropCSS === p) { //Some webkit browsers duplicate transform values, one non-prefixed and one prefixed ("transform" and "WebkitTransform"), so we must weed out the extra one here. s[p.replace(_camelExp, _camelFunc)] = cs.getPropertyValue(p); } } } else { //some browsers behave differently - cs.length is always 0, so we must do a for...in loop. for (i in cs) { if (i.indexOf("Transform") === -1 || _transformProp === i) { //Some webkit browsers duplicate transform values, one non-prefixed and one prefixed ("transform" and "WebkitTransform"), so we must weed out the extra one here. s[i] = cs[i]; } } } } else if ((cs = t.currentStyle || t.style)) { for (i in cs) { if (typeof(i) === "string" && s[i] === undefined) { s[i.replace(_camelExp, _camelFunc)] = cs[i]; } } } if (!_supportsOpacity) { s.opacity = _getIEOpacity(t); } tr = _getTransform(t, cs, false); s.rotation = tr.rotation; s.skewX = tr.skewX; s.scaleX = tr.scaleX; s.scaleY = tr.scaleY; s.x = tr.x; s.y = tr.y; if (_supports3D) { s.z = tr.z; s.rotationX = tr.rotationX; s.rotationY = tr.rotationY; s.scaleZ = tr.scaleZ; } if (s.filters) { delete s.filters; } return s; }, // @private analyzes two style objects (as returned by _getAllStyles()) and only looks for differences between them that contain tweenable values (like a number or color). It returns an object with a "difs" property which refers to an object containing only those isolated properties and values for tweening, and a "firstMPT" property which refers to the first MiniPropTween instance in a linked list that recorded all the starting values of the different properties so that we can revert to them at the end or beginning of the tween - we don't want the cascading to get messed up. The forceLookup parameter is an optional generic object with properties that should be forced into the results - this is necessary for className tweens that are overwriting others because imagine a scenario where a rollover/rollout adds/removes a class and the user swipes the mouse over the target SUPER fast, thus nothing actually changed yet and the subsequent comparison of the properties would indicate they match (especially when px rounding is taken into consideration), thus no tweening is necessary even though it SHOULD tween and remove those properties after the tween (otherwise the inline styles will contaminate things). See the className SpecialProp code for details. _cssDif = function(t, s1, s2, vars, forceLookup) { var difs = {}, style = t.style, val, p, mpt; for (p in s2) { if (p !== "cssText") if (p !== "length") if (isNaN(p)) if (s1[p] !== (val = s2[p]) || (forceLookup && forceLookup[p])) if (p.indexOf("Origin") === -1) if (typeof(val) === "number" || typeof(val) === "string") { difs[p] = (val === "auto" && (p === "left" || p === "top")) ? _calculateOffset(t, p) : ((val === "" || val === "auto" || val === "none") && typeof(s1[p]) === "string" && s1[p].replace(_NaNExp, "") !== "") ? 0 : val; //if the ending value is defaulting ("" or "auto"), we check the starting value and if it can be parsed into a number (a string which could have a suffix too, like 700px), then we swap in 0 for "" or "auto" so that things actually tween. if (style[p] !== undefined) { //for className tweens, we must remember which properties already existed inline - the ones that didn't should be removed when the tween isn't in progress because they were only introduced to facilitate the transition between classes. mpt = new MiniPropTween(style, p, style[p], mpt); } } } if (vars) { for (p in vars) { //copy properties (except className) if (p !== "className") { difs[p] = vars[p]; } } } return {difs:difs, firstMPT:mpt}; }, _dimensions = {width:["Left","Right"], height:["Top","Bottom"]}, _margins = ["marginLeft","marginRight","marginTop","marginBottom"], /** * @private Gets the width or height of an element * @param {!Object} t Target element * @param {!string} p Property name ("width" or "height") * @param {Object=} cs Computed style object (if one exists). Just a speed optimization. * @return {number} Dimension (in pixels) */ _getDimension = function(t, p, cs) { if ((t.nodeName + "").toLowerCase() === "svg") { //Chrome no longer supports offsetWidth/offsetHeight on SVG elements. return (cs || _getComputedStyle(t))[p] || 0; } else if (t.getCTM && _isSVG(t)) { return t.getBBox()[p] || 0; } var v = parseFloat((p === "width") ? t.offsetWidth : t.offsetHeight), a = _dimensions[p], i = a.length; cs = cs || _getComputedStyle(t, null); while (--i > -1) { v -= parseFloat( _getStyle(t, "padding" + a[i], cs, true) ) || 0; v -= parseFloat( _getStyle(t, "border" + a[i] + "Width", cs, true) ) || 0; } return v; }, // @private Parses position-related complex strings like "top left" or "50px 10px" or "70% 20%", etc. which are used for things like transformOrigin or backgroundPosition. Optionally decorates a supplied object (recObj) with the following properties: "ox" (offsetX), "oy" (offsetY), "oxp" (if true, "ox" is a percentage not a pixel value), and "oxy" (if true, "oy" is a percentage not a pixel value) _parsePosition = function(v, recObj) { if (v === "contain" || v === "auto" || v === "auto auto") { //note: Firefox uses "auto auto" as default whereas Chrome uses "auto". return v + " "; } if (v == null || v === "") { v = "0 0"; } var a = v.split(" "), x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0], y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1], i; if (a.length > 3 && !recObj) { //multiple positions a = v.split(", ").join(",").split(","); v = []; for (i = 0; i < a.length; i++) { v.push(_parsePosition(a[i])); } return v.join(","); } if (y == null) { y = (x === "center") ? "50%" : "0"; } else if (y === "center") { y = "50%"; } if (x === "center" || (isNaN(parseFloat(x)) && (x + "").indexOf("=") === -1)) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative. x = "50%"; } v = x + " " + y + ((a.length > 2) ? " " + a[2] : ""); if (recObj) { recObj.oxp = (x.indexOf("%") !== -1); recObj.oyp = (y.indexOf("%") !== -1); recObj.oxr = (x.charAt(1) === "="); recObj.oyr = (y.charAt(1) === "="); recObj.ox = parseFloat(x.replace(_NaNExp, "")); recObj.oy = parseFloat(y.replace(_NaNExp, "")); recObj.v = v; } return recObj || v; }, /** * @private Takes an ending value (typically a string, but can be a number) and a starting value and returns the change between the two, looking for relative value indicators like += and -= and it also ignores suffixes (but make sure the ending value starts with a number or +=/-= and that the starting value is a NUMBER!) * @param {(number|string)} e End value which is typically a string, but could be a number * @param {(number|string)} b Beginning value which is typically a string but could be a number * @return {number} Amount of change between the beginning and ending values (relative values that have a "+=" or "-=" are recognized) */ _parseChange = function(e, b) { if (typeof(e) === "function") { e = e(_index, _target); } return (typeof(e) === "string" && e.charAt(1) === "=") ? parseInt(e.charAt(0) + "1", 10) * parseFloat(e.substr(2)) : (parseFloat(e) - parseFloat(b)) || 0; }, /** * @private Takes a value and a default number, checks if the value is relative, null, or numeric and spits back a normalized number accordingly. Primarily used in the _parseTransform() function. * @param {Object} v Value to be parsed * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter) * @return {number} Parsed value */ _parseVal = function(v, d) { if (typeof(v) === "function") { v = v(_index, _target); } return (v == null) ? d : (typeof(v) === "string" && v.charAt(1) === "=") ? parseInt(v.charAt(0) + "1", 10) * parseFloat(v.substr(2)) + d : parseFloat(v) || 0; }, /** * @private Translates strings like "40deg" or "40" or 40rad" or "+=40deg" or "270_short" or "-90_cw" or "+=45_ccw" to a numeric radian angle. Of course a starting/default value must be fed in too so that relative values can be calculated properly. * @param {Object} v Value to be parsed * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter) * @param {string=} p property name for directionalEnd (optional - only used when the parsed value is directional ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation). Property name would be "rotation", "rotationX", or "rotationY" * @param {Object=} directionalEnd An object that will store the raw end values for directional angles ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation. * @return {number} parsed angle in radians */ _parseAngle = function(v, d, p, directionalEnd) { var min = 0.000001, cap, split, dif, result, isRelative; if (typeof(v) === "function") { v = v(_index, _target); } if (v == null) { result = d; } else if (typeof(v) === "number") { result = v; } else { cap = 360; split = v.split("_"); isRelative = (v.charAt(1) === "="); dif = (isRelative ? parseInt(v.charAt(0) + "1", 10) * parseFloat(split[0].substr(2)) : parseFloat(split[0])) * ((v.indexOf("rad") === -1) ? 1 : _RAD2DEG) - (isRelative ? 0 : d); if (split.length) { if (directionalEnd) { directionalEnd[p] = d + dif; } if (v.indexOf("short") !== -1) { dif = dif % cap; if (dif !== dif % (cap / 2)) { dif = (dif < 0) ? dif + cap : dif - cap; } } if (v.indexOf("_cw") !== -1 && dif < 0) { dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } else if (v.indexOf("ccw") !== -1 && dif > 0) { dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } } result = d + dif; } if (result < min && result > -min) { result = 0; } return result; }, _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, _hue = function(h, m1, m2) { h = (h < 0) ? h + 1 : (h > 1) ? h - 1 : h; return ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : (h < 0.5) ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * 255) + 0.5) | 0; }, /** * @private Parses a color (like #9F0, #FF9900, rgb(255,51,153) or hsl(108, 50%, 10%)) into an array with 3 elements for red, green, and blue or if toHSL parameter is true, it will populate the array with hue, saturation, and lightness values. If a relative value is found in an hsl() or hsla() string, it will preserve those relative prefixes and all the values in the array will be strings instead of numbers (in all other cases it will be populated with numbers). * @param {(string|number)} v The value the should be parsed which could be a string like #9F0 or rgb(255,102,51) or rgba(255,0,0,0.5) or it could be a number like 0xFF00CC or even a named color like red, blue, purple, etc. * @param {(boolean)} toHSL If true, an hsl() or hsla() value will be returned instead of rgb() or rgba() * @return {Array.<number>} An array containing red, green, and blue (and optionally alpha) in that order, or if the toHSL parameter was true, the array will contain hue, saturation and lightness (and optionally alpha) in that order. Always numbers unless there's a relative prefix found in an hsl() or hsla() string and toHSL is true. */ _parseColor = CSSPlugin.parseColor = function(v, toHSL) { var a, r, g, b, h, s, l, max, min, d, wasHSL; if (!v) { a = _colorLookup.black; } else if (typeof(v) === "number") { a = [v >> 16, (v >> 8) & 255, v & 255]; } else { if (v.charAt(v.length - 1) === ",") { //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value. v = v.substr(0, v.length - 1); } if (_colorLookup[v]) { a = _colorLookup[v]; } else if (v.charAt(0) === "#") { if (v.length === 4) { //for shorthand like #9F0 r = v.charAt(1); g = v.charAt(2); b = v.charAt(3); v = "#" + r + r + g + g + b + b; } v = parseInt(v.substr(1), 16); a = [v >> 16, (v >> 8) & 255, v & 255]; } else if (v.substr(0, 3) === "hsl") { a = wasHSL = v.match(_numExp); if (!toHSL) { h = (Number(a[0]) % 360) / 360; s = Number(a[1]) / 100; l = Number(a[2]) / 100; g = (l <= 0.5) ? l * (s + 1) : l + s - l * s; r = l * 2 - g; if (a.length > 3) { a[3] = Number(v[3]); } a[0] = _hue(h + 1 / 3, r, g); a[1] = _hue(h, r, g); a[2] = _hue(h - 1 / 3, r, g); } else if (v.indexOf("=") !== -1) { //if relative values are found, just return the raw strings with the relative prefixes in place. return v.match(_relNumExp); } } else { a = v.match(_numExp) || _colorLookup.transparent; } a[0] = Number(a[0]); a[1] = Number(a[1]); a[2] = Number(a[2]); if (a.length > 3) { a[3] = Number(a[3]); } } if (toHSL && !wasHSL) { r = a[0] / 255; g = a[1] / 255; b = a[2] / 255; max = Math.max(r, g, b); min = Math.min(r, g, b); l = (max + min) / 2; if (max === min) { h = s = 0; } else { d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); h = (max === r) ? (g - b) / d + (g < b ? 6 : 0) : (max === g) ? (b - r) / d + 2 : (r - g) / d + 4; h *= 60; } a[0] = (h + 0.5) | 0; a[1] = (s * 100 + 0.5) | 0; a[2] = (l * 100 + 0.5) | 0; } return a; }, _formatColors = function(s, toHSL) { var colors = s.match(_colorExp) || [], charIndex = 0, parsed = colors.length ? "" : s, i, color, temp; for (i = 0; i < colors.length; i++) { color = colors[i]; temp = s.substr(charIndex, s.indexOf(color, charIndex)-charIndex); charIndex += temp.length + color.length; color = _parseColor(color, toHSL); if (color.length === 3) { color.push(1); } parsed += temp + (toHSL ? "hsla(" + color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : "rgba(" + color.join(",")) + ")"; } return parsed + s.substr(charIndex); }, _colorExp = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b"; //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc. for (p in _colorLookup) { _colorExp += "|" + p + "\\b"; } _colorExp = new RegExp(_colorExp+")", "gi"); CSSPlugin.colorStringFilter = function(a) { var combined = a[0] + a[1], toHSL; if (_colorExp.test(combined)) { toHSL = (combined.indexOf("hsl(") !== -1 || combined.indexOf("hsla(") !== -1); a[0] = _formatColors(a[0], toHSL); a[1] = _formatColors(a[1], toHSL); } _colorExp.lastIndex = 0; }; Iif (!TweenLite.defaultStringFilter) { TweenLite.defaultStringFilter = CSSPlugin.colorStringFilter; } /** * @private Returns a formatter function that handles taking a string (or number in some cases) and returning a consistently formatted one in terms of delimiters, quantity of values, etc. For example, we may get boxShadow values defined as "0px red" or "0px 0px 10px rgb(255,0,0)" or "0px 0px 20px 20px #F00" and we need to ensure that what we get back is described with 4 numbers and a color. This allows us to feed it into the _parseComplex() method and split the values up appropriately. The neat thing about this _getFormatter() function is that the dflt defines a pattern as well as a default, so for example, _getFormatter("0px 0px 0px 0px #777", true) not only sets the default as 0px for all distances and #777 for the color, but also sets the pattern such that 4 numbers and a color will always get returned. * @param {!string} dflt The default value and pattern to follow. So "0px 0px 0px 0px #777" will ensure that 4 numbers and a color will always get returned. * @param {boolean=} clr If true, the values should be searched for color-related data. For example, boxShadow values typically contain a color whereas borderRadius don't. * @param {boolean=} collapsible If true, the value is a top/left/right/bottom style one that acts like margin or padding, where if only one value is received, it's used for all 4; if 2 are received, the first is duplicated for 3rd (bottom) and the 2nd is duplicated for the 4th spot (left), etc. * @return {Function} formatter function */ var _getFormatter = function(dflt, clr, collapsible, multi) { if (dflt == null) { return function(v) {return v;}; } var dColor = clr ? (dflt.match(_colorExp) || [""])[0] : "", dVals = dflt.split(dColor).join("").match(_valuesExp) || [], pfx = dflt.substr(0, dflt.indexOf(dVals[0])), sfx = (dflt.charAt(dflt.length - 1) === ")") ? ")" : "", delim = (dflt.indexOf(" ") !== -1) ? " " : ",", numVals = dVals.length, dSfx = (numVals > 0) ? dVals[0].replace(_numExp, "") : "", formatter; Iif (!numVals) { return function(v) {return v;}; } if (clr) { formatter = function(v) { var color, vals, i, a; if (typeof(v) === "number") { v += dSfx; } else if (multi && _commasOutsideParenExp.test(v)) { a = v.replace(_commasOutsideParenExp, "|").split("|"); for (i = 0; i < a.length; i++) { a[i] = formatter(a[i]); } return a.join(","); } color = (v.match(_colorExp) || [dColor])[0]; vals = v.split(color).join("").match(_valuesExp) || []; i = vals.length; if (numVals > i--) { while (++i < numVals) { vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i]; } } return pfx + vals.join(delim) + delim + color + sfx + (v.indexOf("inset") !== -1 ? " inset" : ""); }; return formatter; } formatter = function(v) { var vals, a, i; if (typeof(v) === "number") { v += dSfx; } else if (multi && _commasOutsideParenExp.test(v)) { a = v.replace(_commasOutsideParenExp, "|").split("|"); for (i = 0; i < a.length; i++) { a[i] = formatter(a[i]); } return a.join(","); } vals = v.match(_valuesExp) || []; i = vals.length; if (numVals > i--) { while (++i < numVals) { vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i]; } } return pfx + vals.join(delim) + sfx; }; return formatter; }, /** * @private returns a formatter function that's used for edge-related values like marginTop, marginLeft, paddingBottom, paddingRight, etc. Just pass a comma-delimited list of property names related to the edges. * @param {!string} props a comma-delimited list of property names in order from top to left, like "marginTop,marginRight,marginBottom,marginLeft" * @return {Function} a formatter function */ _getEdgeParser = function(props) { props = props.split(","); return function(t, e, p, cssp, pt, plugin, vars) { var a = (e + "").split(" "), i; vars = {}; for (i = 0; i < 4; i++) { vars[props[i]] = a[i] = a[i] || a[(((i - 1) / 2) >> 0)]; } return cssp.parse(t, vars, pt, plugin); }; }, // @private used when other plugins must tween values first, like BezierPlugin or ThrowPropsPlugin, etc. That plugin's setRatio() gets called first so that the values are updated, and then we loop through the MiniPropTweens which handle copying the values into their appropriate slots so that they can then be applied correctly in the main CSSPlugin setRatio() method. Remember, we typically create a proxy object that has a bunch of uniquely-named properties that we feed to the sub-plugin and it does its magic normally, and then we must interpret those values and apply them to the css because often numbers must get combined/concatenated, suffixes added, etc. to work with css, like boxShadow could have 4 values plus a color. _setPluginRatio = _internals._setPluginRatio = function(v) { this.plugin.setRatio(v); var d = this.data, proxy = d.proxy, mpt = d.firstMPT, min = 0.000001, val, pt, i, str, p; while (mpt) { val = proxy[mpt.v]; if (mpt.r) { val = Math.round(val); } else if (val < min && val > -min) { val = 0; } mpt.t[mpt.p] = val; mpt = mpt._next; } if (d.autoRotate) { d.autoRotate.rotation = d.mod ? d.mod(proxy.rotation, this.t) : proxy.rotation; //special case for ModifyPlugin to hook into an auto-rotating bezier } //at the end, we must set the CSSPropTween's "e" (end) value dynamically here because that's what is used in the final setRatio() method. Same for "b" at the beginning. if (v === 1 || v === 0) { mpt = d.firstMPT; p = (v === 1) ? "e" : "b"; while (mpt) { pt = mpt.t; if (!pt.type) { pt[p] = pt.s + pt.xs0; } else if (pt.type === 1) { str = pt.xs0 + pt.s + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt[p] = str; } mpt = mpt._next; } } }, /** * @private @constructor Used by a few SpecialProps to hold important values for proxies. For example, _parseToProxy() creates a MiniPropTween instance for each property that must get tweened on the proxy, and we record the original property name as well as the unique one we create for the proxy, plus whether or not the value needs to be rounded plus the original value. * @param {!Object} t target object whose property we're tweening (often a CSSPropTween) * @param {!string} p property name * @param {(number|string|object)} v value * @param {MiniPropTween=} next next MiniPropTween in the linked list * @param {boolean=} r if true, the tweened value should be rounded to the nearest integer */ MiniPropTween = function(t, p, v, next, r) { this.t = t; this.p = p; this.v = v; this.r = r; if (next) { next._prev = this; this._next = next; } }, /** * @private Most other plugins (like BezierPlugin and ThrowPropsPlugin and others) can only tween numeric values, but CSSPlugin must accommodate special values that have a bunch of extra data (like a suffix or strings between numeric values, etc.). For example, boxShadow has values like "10px 10px 20px 30px rgb(255,0,0)" which would utterly confuse other plugins. This method allows us to split that data apart and grab only the numeric data and attach it to uniquely-named properties of a generic proxy object ({}) so that we can feed that to virtually any plugin to have the numbers tweened. However, we must also keep track of which properties from the proxy go with which CSSPropTween values and instances. So we create a linked list of MiniPropTweens. Each one records a target (the original CSSPropTween), property (like "s" or "xn1" or "xn2") that we're tweening and the unique property name that was used for the proxy (like "boxShadow_xn1" and "boxShadow_xn2") and whether or not they need to be rounded. That way, in the _setPluginRatio() method we can simply copy the values over from the proxy to the CSSPropTween instance(s). Then, when the main CSSPlugin setRatio() method runs and applies the CSSPropTween values accordingly, they're updated nicely. So the external plugin tweens the numbers, _setPluginRatio() copies them over, and setRatio() acts normally, applying css-specific values to the element. * This method returns an object that has the following properties: * - proxy: a generic object containing the starting values for all the properties that will be tweened by the external plugin. This is what we feed to the external _onInitTween() as the target * - end: a generic object containing the ending values for all the properties that will be tweened by the external plugin. This is what we feed to the external plugin's _onInitTween() as the destination values * - firstMPT: the first MiniPropTween in the linked list * - pt: the first CSSPropTween in the linked list that was created when parsing. If shallow is true, this linked list will NOT attach to the one passed into the _parseToProxy() as the "pt" (4th) parameter. * @param {!Object} t target object to be tweened * @param {!(Object|string)} vars the object containing the information about the tweening values (typically the end/destination values) that should be parsed * @param {!CSSPlugin} cssp The CSSPlugin instance * @param {CSSPropTween=} pt the next CSSPropTween in the linked list * @param {TweenPlugin=} plugin the external TweenPlugin instance that will be handling tweening the numeric values * @param {boolean=} shallow if true, the resulting linked list from the parse will NOT be attached to the CSSPropTween that was passed in as the "pt" (4th) parameter. * @return An object containing the following properties: proxy, end, firstMPT, and pt (see above for descriptions) */ _parseToProxy = _internals._parseToProxy = function(t, vars, cssp, pt, plugin, shallow) { var bpt = pt, start = {}, end = {}, transform = cssp._transform, oldForce = _forcePT, i, p, xp, mpt, firstPT; cssp._transform = null; _forcePT = vars; pt = firstPT = cssp.parse(t, vars, pt, plugin); _forcePT = oldForce; //break off from the linked list so the new ones are isolated. if (shallow) { cssp._transform = transform; if (bpt) { bpt._prev = null; if (bpt._prev) { bpt._prev._next = null; } } } while (pt && pt !== bpt) { if (pt.type <= 1) { p = pt.p; end[p] = pt.s + pt.c; start[p] = pt.s; if (!shallow) { mpt = new MiniPropTween(pt, "s", p, mpt, pt.r); pt.c = 0; } if (pt.type === 1) { i = pt.l; while (--i > 0) { xp = "xn" + i; p = pt.p + "_" + xp; end[p] = pt.data[xp]; start[p] = pt[xp]; if (!shallow) { mpt = new MiniPropTween(pt, xp, p, mpt, pt.rxp[xp]); } } } } pt = pt._next; } return {proxy:start, end:end, firstMPT:mpt, pt:firstPT}; }, /** * @constructor Each property that is tweened has at least one CSSPropTween associated with it. These instances store important information like the target, property, starting value, amount of change, etc. They can also optionally have a number of "extra" strings and numeric values named xs1, xn1, xs2, xn2, xs3, xn3, etc. where "s" indicates string and "n" indicates number. These can be pieced together in a complex-value tween (type:1) that has alternating types of data like a string, number, string, number, etc. For example, boxShadow could be "5px 5px 8px rgb(102, 102, 51)". In that value, there are 6 numbers that may need to tween and then pieced back together into a string again with spaces, suffixes, etc. xs0 is special in that it stores the suffix for standard (type:0) tweens, -OR- the first string (prefix) in a complex-value (type:1) CSSPropTween -OR- it can be the non-tweening value in a type:-1 CSSPropTween. We do this to conserve memory. * CSSPropTweens have the following optional properties as well (not defined through the constructor): * - l: Length in terms of the number of extra properties that the CSSPropTween has (default: 0). For example, for a boxShadow we may need to tween 5 numbers in which case l would be 5; Keep in mind that the start/end values for the first number that's tweened are always stored in the s and c properties to conserve memory. All additional values thereafter are stored in xn1, xn2, etc. * - xfirst: The first instance of any sub-CSSPropTweens that are tweening properties of this instance. For example, we may split up a boxShadow tween so that there's a main CSSPropTween of type:1 that has various xs* and xn* values associated with the h-shadow, v-shadow, blur, color, etc. Then we spawn a CSSPropTween for each of those that has a higher priority and runs BEFORE the main CSSPropTween so that the values are all set by the time it needs to re-assemble them. The xfirst gives us an easy way to identify the first one in that chain which typically ends at the main one (because they're all prepende to the linked list) * - plugin: The TweenPlugin instance that will handle the tweening of any complex values. For example, sometimes we don't want to use normal subtweens (like xfirst refers to) to tween the values - we might want ThrowPropsPlugin or BezierPlugin some other plugin to do the actual tweening, so we create a plugin instance and store a reference here. We need this reference so that if we get a request to round values or disable a tween, we can pass along that request. * - data: Arbitrary data that needs to be stored with the CSSPropTween. Typically if we're going to have a plugin handle the tweening of a complex-value tween, we create a generic object that stores the END values that we're tweening to and the CSSPropTween's xs1, xs2, etc. have the starting values. We store that object as data. That way, we can simply pass that object to the plugin and use the CSSPropTween as the target. * - setRatio: Only used for type:2 tweens that require custom functionality. In this case, we call the CSSPropTween's setRatio() method and pass the ratio each time the tween updates. This isn't quite as efficient as doing things directly in the CSSPlugin's setRatio() method, but it's very convenient and flexible. * @param {!Object} t Target object whose property will be tweened. Often a DOM element, but not always. It could be anything. * @param {string} p Property to tween (name). For example, to tween element.width, p would be "width". * @param {number} s Starting numeric value * @param {number} c Change in numeric value over the course of the entire tween. For example, if element.width starts at 5 and should end at 100, c would be 95. * @param {CSSPropTween=} next The next CSSPropTween in the linked list. If one is defined, we will define its _prev as the new instance, and the new instance's _next will be pointed at it. * @param {number=} type The type of CSSPropTween where -1 = a non-tweening value, 0 = a standard simple tween, 1 = a complex value (like one that has multiple numbers in a comma- or space-delimited string like border:"1px solid red"), and 2 = one that uses a custom setRatio function that does all of the work of applying the values on each update. * @param {string=} n Name of the property that should be used for overwriting purposes which is typically the same as p but not always. For example, we may need to create a subtween for the 2nd part of a "clip:rect(...)" tween in which case "p" might be xs1 but "n" is still "clip" * @param {boolean=} r If true, the value(s) should be rounded * @param {number=} pr Priority in the linked list order. Higher priority CSSPropTweens will be updated before lower priority ones. The default priority is 0. * @param {string=} b Beginning value. We store this to ensure that it is EXACTLY what it was when the tween began without any risk of interpretation issues. * @param {string=} e Ending value. We store this to ensure that it is EXACTLY what the user defined at the end of the tween without any risk of interpretation issues. */ CSSPropTween = _internals.CSSPropTween = function(t, p, s, c, next, type, n, r, pr, b, e) { this.t = t; //target this.p = p; //property this.s = s; //starting value this.c = c; //change value this.n = n || p; //name that this CSSPropTween should be associated to (usually the same as p, but not always - n is what overwriting looks at) if (!(t instanceof CSSPropTween)) { _overwriteProps.push(this.n); } this.r = r; //round (boolean) this.type = type || 0; //0 = normal tween, -1 = non-tweening (in which case xs0 will be applied to the target's property, like tp.t[tp.p] = tp.xs0), 1 = complex-value SpecialProp, 2 = custom setRatio() that does all the work if (pr) { this.pr = pr; _hasPriority = true; } this.b = (b === undefined) ? s : b; this.e = (e === undefined) ? s + c : e; if (next) { this._next = next; next._prev = this; } }, _addNonTweeningNumericPT = function(target, prop, start, end, next, overwriteProp) { //cleans up some code redundancies and helps minification. Just a fast way to add a NUMERIC non-tweening CSSPropTween var pt = new CSSPropTween(target, prop, start, end - start, next, -1, overwriteProp); pt.b = start; pt.e = pt.xs0 = end; return pt; }, /** * Takes a target, the beginning value and ending value (as strings) and parses them into a CSSPropTween (possibly with child CSSPropTweens) that accommodates multiple numbers, colors, comma-delimited values, etc. For example: * sp.parseComplex(element, "boxShadow", "5px 10px 20px rgb(255,102,51)", "0px 0px 0px red", true, "0px 0px 0px rgb(0,0,0,0)", pt); * It will walk through the beginning and ending values (which should be in the same format with the same number and type of values) and figure out which parts are numbers, what strings separate the numeric/tweenable values, and then create the CSSPropTweens accordingly. If a plugin is defined, no child CSSPropTweens will be created. Instead, the ending values will be stored in the "data" property of the returned CSSPropTween like: {s:-5, xn1:-10, xn2:-20, xn3:255, xn4:0, xn5:0} so that it can be fed to any other plugin and it'll be plain numeric tweens but the recomposition of the complex value will be handled inside CSSPlugin's setRatio(). * If a setRatio is defined, the type of the CSSPropTween will be set to 2 and recomposition of the values will be the responsibility of that method. * * @param {!Object} t Target whose property will be tweened * @param {!string} p Property that will be tweened (its name, like "left" or "backgroundColor" or "boxShadow") * @param {string} b Beginning value * @param {string} e Ending value * @param {boolean} clrs If true, the value could contain a color value like "rgb(255,0,0)" or "#F00" or "red". The default is false, so no colors will be recognized (a performance optimization) * @param {(string|number|Object)} dflt The default beginning value that should be used if no valid beginning value is defined or if the number of values inside the complex beginning and ending values don't match * @param {?CSSPropTween} pt CSSPropTween instance that is the current head of the linked list (we'll prepend to this). * @param {number=} pr Priority in the linked list order. Higher priority properties will be updated before lower priority ones. The default priority is 0. * @param {TweenPlugin=} plugin If a plugin should handle the tweening of extra properties, pass the plugin instance here. If one is defined, then NO subtweens will be created for any extra properties (the properties will be created - just not additional CSSPropTween instances to tween them) because the plugin is expected to do so. However, the end values WILL be populated in the "data" property, like {s:100, xn1:50, xn2:300} * @param {function(number)=} setRatio If values should be set in a custom function instead of being pieced together in a type:1 (complex-value) CSSPropTween, define that custom function here. * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parseComplex() call. */ _parseComplex = CSSPlugin.parseComplex = function(t, p, b, e, clrs, dflt, pt, pr, plugin, setRatio) { //DEBUG: _log("parseComplex: "+p+", b: "+b+", e: "+e); b = b || dflt || ""; if (typeof(e) === "function") { e = e(_index, _target); } pt = new CSSPropTween(t, p, 0, 0, pt, (setRatio ? 2 : 1), null, false, pr, b, e); e += ""; //ensures it's a string if (clrs && _colorExp.test(e + b)) { //if colors are found, normalize the formatting to rgba() or hsla(). e = [b, e]; CSSPlugin.colorStringFilter(e); b = e[0]; e = e[1]; } var ba = b.split(", ").join(",").split(" "), //beginning array ea = e.split(", ").join(",").split(" "), //ending array l = ba.length, autoRound = (_autoRound !== false), i, xi, ni, bv, ev, bnums, enums, bn, hasAlpha, temp, cv, str, useHSL; if (e.indexOf(",") !== -1 || b.indexOf(",") !== -1) { ba = ba.join(" ").replace(_commasOutsideParenExp, ", ").split(" "); ea = ea.join(" ").replace(_commasOutsideParenExp, ", ").split(" "); l = ba.length; } if (l !== ea.length) { //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")"); ba = (dflt || "").split(" "); l = ba.length; } pt.plugin = plugin; pt.setRatio = setRatio; _colorExp.lastIndex = 0; for (i = 0; i < l; i++) { bv = ba[i]; ev = ea[i]; bn = parseFloat(bv); //if the value begins with a number (most common). It's fine if it has a suffix like px if (bn || bn === 0) { pt.appendXtra("", bn, _parseChange(ev, bn), ev.replace(_relNumExp, ""), (autoRound && ev.indexOf("px") !== -1), true); //if the value is a color } else if (clrs && _colorExp.test(bv)) { str = ev.indexOf(")") + 1; str = ")" + (str ? ev.substr(str) : ""); //if there's a comma or ) at the end, retain it. useHSL = (ev.indexOf("hsl") !== -1 && _supportsOpacity); bv = _parseColor(bv, useHSL); ev = _parseColor(ev, useHSL); hasAlpha = (bv.length + ev.length > 6); if (hasAlpha && !_supportsOpacity && ev[3] === 0) { //older versions of IE don't support rgba(), so if the destination alpha is 0, just use "transparent" for the end color pt["xs" + pt.l] += pt.l ? " transparent" : "transparent"; pt.e = pt.e.split(ea[i]).join("transparent"); } else { if (!_supportsOpacity) { //old versions of IE don't support rgba(). hasAlpha = false; } if (useHSL) { pt.appendXtra((hasAlpha ? "hsla(" : "hsl("), bv[0], _parseChange(ev[0], bv[0]), ",", false, true) .appendXtra("", bv[1], _parseChange(ev[1], bv[1]), "%,", false) .appendXtra("", bv[2], _parseChange(ev[2], bv[2]), (hasAlpha ? "%," : "%" + str), false); } else { pt.appendXtra((hasAlpha ? "rgba(" : "rgb("), bv[0], ev[0] - bv[0], ",", true, true) .appendXtra("", bv[1], ev[1] - bv[1], ",", true) .appendXtra("", bv[2], ev[2] - bv[2], (hasAlpha ? "," : str), true); } if (hasAlpha) { bv = (bv.length < 4) ? 1 : bv[3]; pt.appendXtra("", bv, ((ev.length < 4) ? 1 : ev[3]) - bv, str, false); } } _colorExp.lastIndex = 0; //otherwise the test() on the RegExp could move the lastIndex and taint future results. } else { bnums = bv.match(_numExp); //gets each group of numbers in the beginning value string and drops them into an array //if no number is found, treat it as a non-tweening value and just append the string to the current xs. if (!bnums) { pt["xs" + pt.l] += (pt.l || pt["xs" + pt.l]) ? " " + ev : ev; //loop through all the numbers that are found and construct the extra values on the pt. } else { enums = ev.match(_relNumExp); //get each group of numbers in the end value string and drop them into an array. We allow relative values too, like +=50 or -=.5 if (!enums || enums.length !== bnums.length) { //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")"); return pt; } ni = 0; for (xi = 0; xi < bnums.length; xi++) { cv = bnums[xi]; temp = bv.indexOf(cv, ni); pt.appendXtra(bv.substr(ni, temp - ni), Number(cv), _parseChange(enums[xi], cv), "", (autoRound && bv.substr(temp + cv.length, 2) === "px"), (xi === 0)); ni = temp + cv.length; } pt["xs" + pt.l] += bv.substr(ni); } } } //if there are relative values ("+=" or "-=" prefix), we need to adjust the ending value to eliminate the prefixes and combine the values properly. if (e.indexOf("=") !== -1) if (pt.data) { str = pt.xs0 + pt.data.s; for (i = 1; i < pt.l; i++) { str += pt["xs" + i] + pt.data["xn" + i]; } pt.e = str + pt["xs" + i]; } if (!pt.l) { pt.type = -1; pt.xs0 = pt.e; } return pt.xfirst || pt; }, i = 9; p = CSSPropTween.prototype; p.l = p.pr = 0; //length (number of extra properties like xn1, xn2, xn3, etc. while (--i > 0) { p["xn" + i] = 0; p["xs" + i] = ""; } p.xs0 = ""; p._next = p._prev = p.xfirst = p.data = p.plugin = p.setRatio = p.rxp = null; /** * Appends and extra tweening value to a CSSPropTween and automatically manages any prefix and suffix strings. The first extra value is stored in the s and c of the main CSSPropTween instance, but thereafter any extras are stored in the xn1, xn2, xn3, etc. The prefixes and suffixes are stored in the xs0, xs1, xs2, etc. properties. For example, if I walk through a clip value like "rect(10px, 5px, 0px, 20px)", the values would be stored like this: * xs0:"rect(", s:10, xs1:"px, ", xn1:5, xs2:"px, ", xn2:0, xs3:"px, ", xn3:20, xn4:"px)" * And they'd all get joined together when the CSSPlugin renders (in the setRatio() method). * @param {string=} pfx Prefix (if any) * @param {!number} s Starting value * @param {!number} c Change in numeric value over the course of the entire tween. For example, if the start is 5 and the end is 100, the change would be 95. * @param {string=} sfx Suffix (if any) * @param {boolean=} r Round (if true). * @param {boolean=} pad If true, this extra value should be separated by the previous one by a space. If there is no previous extra and pad is true, it will automatically drop the space. * @return {CSSPropTween} returns itself so that multiple methods can be chained together. */ p.appendXtra = function(pfx, s, c, sfx, r, pad) { var pt = this, l = pt.l; pt["xs" + l] += (pad && (l || pt["xs" + l])) ? " " + pfx : pfx || ""; if (!c) if (l !== 0 && !pt.plugin) { //typically we'll combine non-changing values right into the xs to optimize performance, but we don't combine them when there's a plugin that will be tweening the values because it may depend on the values being split apart, like for a bezier, if a value doesn't change between the first and second iteration but then it does on the 3rd, we'll run into trouble because there's no xn slot for that value! pt["xs" + l] += s + (sfx || ""); return pt; } pt.l++; pt.type = pt.setRatio ? 2 : 1; pt["xs" + pt.l] = sfx || ""; if (l > 0) { pt.data["xn" + l] = s + c; pt.rxp["xn" + l] = r; //round extra property (we need to tap into this in the _parseToProxy() method) pt["xn" + l] = s; if (!pt.plugin) { pt.xfirst = new CSSPropTween(pt, "xn" + l, s, c, pt.xfirst || pt, 0, pt.n, r, pt.pr); pt.xfirst.xs0 = 0; //just to ensure that the property stays numeric which helps modern browsers speed up processing. Remember, in the setRatio() method, we do pt.t[pt.p] = val + pt.xs0 so if pt.xs0 is "" (the default), it'll cast the end value as a string. When a property is a number sometimes and a string sometimes, it prevents the compiler from locking in the data type, slowing things down slightly. } return pt; } pt.data = {s:s + c}; pt.rxp = {}; pt.s = s; pt.c = c; pt.r = r; return pt; }; /** * @constructor A SpecialProp is basically a css property that needs to be treated in a non-standard way, like if it may contain a complex value like boxShadow:"5px 10px 15px rgb(255, 102, 51)" or if it is associated with another plugin like ThrowPropsPlugin or BezierPlugin. Every SpecialProp is associated with a particular property name like "boxShadow" or "throwProps" or "bezier" and it will intercept those values in the vars object that's passed to the CSSPlugin and handle them accordingly. * @param {!string} p Property name (like "boxShadow" or "throwProps") * @param {Object=} options An object containing any of the following configuration options: * - defaultValue: the default value * - parser: A function that should be called when the associated property name is found in the vars. This function should return a CSSPropTween instance and it should ensure that it is properly inserted into the linked list. It will receive 4 paramters: 1) The target, 2) The value defined in the vars, 3) The CSSPlugin instance (whose _firstPT should be used for the linked list), and 4) A computed style object if one was calculated (this is a speed optimization that allows retrieval of starting values quicker) * - formatter: a function that formats any value received for this special property (for example, boxShadow could take "5px 5px red" and format it to "5px 5px 0px 0px red" so that both the beginning and ending values have a common order and quantity of values.) * - prefix: if true, we'll determine whether or not this property requires a vendor prefix (like Webkit or Moz or ms or O) * - color: set this to true if the value for this SpecialProp may contain color-related values like rgb(), rgba(), etc. * - priority: priority in the linked list order. Higher priority SpecialProps will be updated before lower priority ones. The default priority is 0. * - multi: if true, the formatter should accommodate a comma-delimited list of values, like boxShadow could have multiple boxShadows listed out. * - collapsible: if true, the formatter should treat the value like it's a top/right/bottom/left value that could be collapsed, like "5px" would apply to all, "5px, 10px" would use 5px for top/bottom and 10px for right/left, etc. * - keyword: a special keyword that can [optionally] be found inside the value (like "inset" for boxShadow). This allows us to validate beginning/ending values to make sure they match (if the keyword is found in one, it'll be added to the other for consistency by default). */ var SpecialProp = function(p, options) { options = options || {}; this.p = options.prefix ? _checkPropPrefix(p) || p : p; _specialProps[p] = _specialProps[this.p] = this; this.format = options.formatter || _getFormatter(options.defaultValue, options.color, options.collapsible, options.multi); if (options.parser) { this.parse = options.parser; } this.clrs = options.color; this.multi = options.multi; this.keyword = options.keyword; this.dflt = options.defaultValue; this.pr = options.priority || 0; }, //shortcut for creating a new SpecialProp that can accept multiple properties as a comma-delimited list (helps minification). dflt can be an array for multiple values (we don't do a comma-delimited list because the default value may contain commas, like rect(0px,0px,0px,0px)). We attach this method to the SpecialProp class/object instead of using a private _createSpecialProp() method so that we can tap into it externally if necessary, like from another plugin. _registerComplexSpecialProp = _internals._registerComplexSpecialProp = function(p, options, defaults) { Iif (typeof(options) !== "object") { options = {parser:defaults}; //to make backwards compatible with older versions of BezierPlugin and ThrowPropsPlugin } var a = p.split(","), d = options.defaultValue, i, temp; defaults = defaults || [d]; for (i = 0; i < a.length; i++) { options.prefix = (i === 0 && options.prefix); options.defaultValue = defaults[i] || d; temp = new SpecialProp(a[i], options); } }, //creates a placeholder special prop for a plugin so that the property gets caught the first time a tween of it is attempted, and at that time it makes the plugin register itself, thus taking over for all future tweens of that property. This allows us to not mandate that things load in a particular order and it also allows us to log() an error that informs the user when they attempt to tween an external plugin-related property without loading its .js file. _registerPluginProp = _internals._registerPluginProp = function(p) { Eif (!_specialProps[p]) { var pluginName = p.charAt(0).toUpperCase() + p.substr(1) + "Plugin"; _registerComplexSpecialProp(p, {parser:function(t, e, p, cssp, pt, plugin, vars) { var pluginClass = _globals.com.greensock.plugins[pluginName]; if (!pluginClass) { _log("Error: " + pluginName + " js file not loaded."); return pt; } pluginClass._cssRegister(); return _specialProps[p].parse(t, e, p, cssp, pt, plugin, vars); }}); } }; p = SpecialProp.prototype; /** * Alias for _parseComplex() that automatically plugs in certain values for this SpecialProp, like its property name, whether or not colors should be sensed, the default value, and priority. It also looks for any keyword that the SpecialProp defines (like "inset" for boxShadow) and ensures that the beginning and ending values have the same number of values for SpecialProps where multi is true (like boxShadow and textShadow can have a comma-delimited list) * @param {!Object} t target element * @param {(string|number|object)} b beginning value * @param {(string|number|object)} e ending (destination) value * @param {CSSPropTween=} pt next CSSPropTween in the linked list * @param {TweenPlugin=} plugin If another plugin will be tweening the complex value, that TweenPlugin instance goes here. * @param {function=} setRatio If a custom setRatio() method should be used to handle this complex value, that goes here. * @return {CSSPropTween=} First CSSPropTween in the linked list */ p.parseComplex = function(t, b, e, pt, plugin, setRatio) { var kwd = this.keyword, i, ba, ea, l, bi, ei; //if this SpecialProp's value can contain a comma-delimited list of values (like boxShadow or textShadow), we must parse them in a special way, and look for a keyword (like "inset" for boxShadow) and ensure that the beginning and ending BOTH have it if the end defines it as such. We also must ensure that there are an equal number of values specified (we can't tween 1 boxShadow to 3 for example) if (this.multi) if (_commasOutsideParenExp.test(e) || _commasOutsideParenExp.test(b)) { ba = b.replace(_commasOutsideParenExp, "|").split("|"); ea = e.replace(_commasOutsideParenExp, "|").split("|"); } else if (kwd) { ba = [b]; ea = [e]; } if (ea) { l = (ea.length > ba.length) ? ea.length : ba.length; for (i = 0; i < l; i++) { b = ba[i] = ba[i] || this.dflt; e = ea[i] = ea[i] || this.dflt; if (kwd) { bi = b.indexOf(kwd); ei = e.indexOf(kwd); if (bi !== ei) { if (ei === -1) { //if the keyword isn't in the end value, remove it from the beginning one. ba[i] = ba[i].split(kwd).join(""); } else if (bi === -1) { //if the keyword isn't in the beginning, add it. ba[i] += " " + kwd; } } } } b = ba.join(", "); e = ea.join(", "); } return _parseComplex(t, this.p, b, e, this.clrs, this.dflt, pt, this.pr, plugin, setRatio); }; /** * Accepts a target and end value and spits back a CSSPropTween that has been inserted into the CSSPlugin's linked list and conforms with all the conventions we use internally, like type:-1, 0, 1, or 2, setting up any extra property tweens, priority, etc. For example, if we have a boxShadow SpecialProp and call: * this._firstPT = sp.parse(element, "5px 10px 20px rgb(2550,102,51)", "boxShadow", this); * It should figure out the starting value of the element's boxShadow, compare it to the provided end value and create all the necessary CSSPropTweens of the appropriate types to tween the boxShadow. The CSSPropTween that gets spit back should already be inserted into the linked list (the 4th parameter is the current head, so prepend to that). * @param {!Object} t Target object whose property is being tweened * @param {Object} e End value as provided in the vars object (typically a string, but not always - like a throwProps would be an object). * @param {!string} p Property name * @param {!CSSPlugin} cssp The CSSPlugin instance that should be associated with this tween. * @param {?CSSPropTween} pt The CSSPropTween that is the current head of the linked list (we'll prepend to it) * @param {TweenPlugin=} plugin If a plugin will be used to tween the parsed value, this is the plugin instance. * @param {Object=} vars Original vars object that contains the data for parsing. * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parse() call. */ p.parse = function(t, e, p, cssp, pt, plugin, vars) { return this.parseComplex(t.style, this.format(_getStyle(t, this.p, _cs, false, this.dflt)), this.format(e), pt, plugin); }; /** * Registers a special property that should be intercepted from any "css" objects defined in tweens. This allows you to handle them however you want without CSSPlugin doing it for you. The 2nd parameter should be a function that accepts 3 parameters: * 1) Target object whose property should be tweened (typically a DOM element) * 2) The end/destination value (could be a string, number, object, or whatever you want) * 3) The tween instance (you probably don't need to worry about this, but it can be useful for looking up information like the duration) * * Then, your function should return a function which will be called each time the tween gets rendered, passing a numeric "ratio" parameter to your function that indicates the change factor (usually between 0 and 1). For example: * * CSSPlugin.registerSpecialProp("myCustomProp", function(target, value, tween) { * var start = target.style.width; * return function(ratio) { * target.style.width = (start + value * ratio) + "px"; * console.log("set width to " + target.style.width); * } * }, 0); * * Then, when I do this tween, it will trigger my special property: * * TweenLite.to(element, 1, {css:{myCustomProp:100}}); * * In the example, of course, we're just changing the width, but you can do anything you want. * * @param {!string} name Property name (or comma-delimited list of property names) that should be intercepted and handled by your function. For example, if I define "myCustomProp", then it would handle that portion of the following tween: TweenLite.to(element, 1, {css:{myCustomProp:100}}) * @param {!function(Object, Object, Object, string):function(number)} onInitTween The function that will be called when a tween of this special property is performed. The function will receive 4 parameters: 1) Target object that should be tweened, 2) Value that was passed to the tween, 3) The tween instance itself (rarely used), and 4) The property name that's being tweened. Your function should return a function that should be called on every update of the tween. That function will receive a single parameter that is a "change factor" value (typically between 0 and 1) indicating the amount of change as a ratio. You can use this to determine how to set the values appropriately in your function. * @param {number=} priority Priority that helps the engine determine the order in which to set the properties (default: 0). Higher priority properties will be updated before lower priority ones. */ CSSPlugin.registerSpecialProp = function(name, onInitTween, priority) { _registerComplexSpecialProp(name, {parser:function(t, e, p, cssp, pt, plugin, vars) { var rv = new CSSPropTween(t, p, 0, 0, pt, 2, p, false, priority); rv.plugin = plugin; rv.setRatio = onInitTween(t, e, cssp._tween, p); return rv; }, priority:priority}); }; //transform-related methods and properties CSSPlugin.useSVGTransformAttr = true; //Safari and Firefox both have some rendering bugs when applying CSS transforms to SVG elements, so default to using the "transform" attribute instead (users can override this). var _transformProps = ("scaleX,scaleY,scaleZ,x,y,z,skewX,skewY,rotation,rotationX,rotationY,perspective,xPercent,yPercent").split(","), _transformProp = _checkPropPrefix("transform"), //the Javascript (camelCase) transform property, like msTransform, WebkitTransform, MozTransform, or OTransform. _transformPropCSS = _prefixCSS + "transform", _transformOriginProp = _checkPropPrefix("transformOrigin"), _supports3D = (_checkPropPrefix("perspective") !== null), Transform = _internals.Transform = function() { this.perspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0; this.force3D = (CSSPlugin.defaultForce3D === false || !_supports3D) ? false : CSSPlugin.defaultForce3D || "auto"; }, _SVGElement = _gsScope.SVGElement, _useSVGTransformAttr, //Some browsers (like Firefox and IE) don't honor transform-origin properly in SVG elements, so we need to manually adjust the matrix accordingly. We feature detect here rather than always doing the conversion for certain browsers because they may fix the problem at some point in the future. _createSVG = function(type, container, attributes) { var element = _doc.createElementNS("http://www.w3.org/2000/svg", type), reg = /([a-z])([A-Z])/g, p; for (p in attributes) { element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]); } container.appendChild(element); return element; }, _docElement = _doc.documentElement || {}, _forceSVGTransformAttr = (function() { //IE and Android stock don't support CSS transforms on SVG elements, so we must write them to the "transform" attribute. We populate this variable in the _parseTransform() method, and only if/when we come across an SVG element var force = _ieVers || (/Android/i.test(_agent) && !_gsScope.chrome), svg, rect, width; Iif (_doc.createElementNS && !force) { //IE8 and earlier doesn't support SVG anyway svg = _createSVG("svg", _docElement); rect = _createSVG("rect", svg, {width:100, height:50, x:100}); width = rect.getBoundingClientRect().width; rect.style[_transformOriginProp] = "50% 50%"; rect.style[_transformProp] = "scaleX(0.5)"; force = (width === rect.getBoundingClientRect().width && !(_isFirefox && _supports3D)); //note: Firefox fails the test even though it does support CSS transforms in 3D. Since we can't push 3D stuff into the transform attribute, we force Firefox to pass the test here (as long as it does truly support 3D). _docElement.removeChild(svg); } return force; })(), _parseSVGOrigin = function(e, local, decoratee, absolute, smoothOrigin, skipRecord) { var tm = e._gsTransform, m = _getMatrix(e, true), v, x, y, xOrigin, yOrigin, a, b, c, d, tx, ty, determinant, xOriginOld, yOriginOld; if (tm) { xOriginOld = tm.xOrigin; //record the original values before we alter them. yOriginOld = tm.yOrigin; } if (!absolute || (v = absolute.split(" ")).length < 2) { b = e.getBBox(); if (b.x === 0 && b.y === 0 && b.width + b.height === 0) { //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case. b = {x: parseFloat(e.hasAttribute("x") ? e.getAttribute("x") : e.hasAttribute("cx") ? e.getAttribute("cx") : 0) || 0, y: parseFloat(e.hasAttribute("y") ? e.getAttribute("y") : e.hasAttribute("cy") ? e.getAttribute("cy") : 0) || 0, width:0, height:0}; } local = _parsePosition(local).split(" "); v = [(local[0].indexOf("%") !== -1 ? parseFloat(local[0]) / 100 * b.width : parseFloat(local[0])) + b.x, (local[1].indexOf("%") !== -1 ? parseFloat(local[1]) / 100 * b.height : parseFloat(local[1])) + b.y]; } decoratee.xOrigin = xOrigin = parseFloat(v[0]); decoratee.yOrigin = yOrigin = parseFloat(v[1]); if (absolute && m !== _identity2DMatrix) { //if svgOrigin is being set, we must invert the matrix and determine where the absolute point is, factoring in the current transforms. Otherwise, the svgOrigin would be based on the element's non-transformed position on the canvas. a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; determinant = (a * d - b * c); if (determinant) { //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero. x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + ((c * ty - d * tx) / determinant); y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - ((a * ty - b * tx) / determinant); xOrigin = decoratee.xOrigin = v[0] = x; yOrigin = decoratee.yOrigin = v[1] = y; } } if (tm) { //avoid jump when transformOrigin is changed - adjust the x/y values accordingly if (skipRecord) { decoratee.xOffset = tm.xOffset; decoratee.yOffset = tm.yOffset; tm = decoratee; } if (smoothOrigin || (smoothOrigin !== false && CSSPlugin.defaultSmoothOrigin !== false)) { x = xOrigin - xOriginOld; y = yOrigin - yOriginOld; //originally, we simply adjusted the x and y values, but that would cause problems if, for example, you created a rotational tween part-way through an x/y tween. Managing the offset in a separate variable gives us ultimate flexibility. //tm.x -= x - (x * m[0] + y * m[2]); //tm.y -= y - (x * m[1] + y * m[3]); tm.xOffset += (x * m[0] + y * m[2]) - x; tm.yOffset += (x * m[1] + y * m[3]) - y; } else { tm.xOffset = tm.yOffset = 0; } } if (!skipRecord) { e.setAttribute("data-svg-origin", v.join(" ")); } }, _getBBoxHack = function(swapIfPossible) { //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a <defs> element and/or <mask>. We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it). var svg = _createElement("svg", this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"), oldParent = this.parentNode, oldSibling = this.nextSibling, oldCSS = this.style.cssText, bbox; _docElement.appendChild(svg); svg.appendChild(this); this.style.display = "block"; if (swapIfPossible) { try { bbox = this.getBBox(); this._originalGetBBox = this.getBBox; this.getBBox = _getBBoxHack; } catch (e) { } } else if (this._originalGetBBox) { bbox = this._originalGetBBox(); } if (oldSibling) { oldParent.insertBefore(this, oldSibling); } else { oldParent.appendChild(this); } _docElement.removeChild(svg); this.style.cssText = oldCSS; return bbox; }, _getBBox = function(e) { try { return e.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a <symbol> or <defs>). https://bugzilla.mozilla.org/show_bug.cgi?id=612118 } catch (error) { return _getBBoxHack.call(e, true); } }, _isSVG = function(e) { //reports if the element is an SVG on which getBBox() actually works return !!(_SVGElement && e.getCTM && _getBBox(e) && (!e.parentNode || e.ownerSVGElement)); }, _identity2DMatrix = [1,0,0,1,0,0], _getMatrix = function(e, force2D) { var tm = e._gsTransform || new Transform(), rnd = 100000, style = e.style, isDefault, s, m, n, dec, none; if (_transformProp) { s = _getStyle(e, _transformPropCSS, null, true); } else if (e.currentStyle) { //for older versions of IE, we need to interpret the filter portion that is in the format: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand') Notice that we need to swap b and c compared to a normal matrix. s = e.currentStyle.filter.match(_ieGetMatrixExp); s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : ""; } isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)"); if (isDefault && _transformProp && ((none = (_getComputedStyle(e).display === "none")) || !e.parentNode)) { if (none) { //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". n = style.display; style.display = "block"; } if (!e.parentNode) { dec = 1; //flag _docElement.appendChild(e); } s = _getStyle(e, _transformPropCSS, null, true); isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)"); if (n) { style.display = n; } else if (none) { _removeProp(style, "display"); } if (dec) { _docElement.removeChild(e); } } if (tm.svg || (e.getCTM && _isSVG(e))) { if (isDefault && (style[_transformProp] + "").indexOf("matrix") !== -1) { //some browsers (like Chrome 40) don't correctly report transforms that are applied inline on an SVG element (they don't get included in the computed style), so we double-check here and accept matrix values s = style[_transformProp]; isDefault = 0; } m = e.getAttribute("transform"); if (isDefault && m) { if (m.indexOf("matrix") !== -1) { //just in case there's a "transform" value specified as an attribute instead of CSS style. Accept either a matrix() or simple translate() value though. s = m; isDefault = 0; } else if (m.indexOf("translate") !== -1) { s = "matrix(1,0,0,1," + m.match(/(?:\-|\b)[\d\-\.e]+\b/gi).join(",") + ")"; isDefault = 0; } } } if (isDefault) { return _identity2DMatrix; } //split the matrix values out into an array (m for matrix) m = (s || "").match(_numExp) || []; i = m.length; while (--i > -1) { n = Number(m[i]); m[i] = (dec = n - (n |= 0)) ? ((dec * rnd + (dec < 0 ? -0.5 : 0.5)) | 0) / rnd + n : n; //convert strings to Numbers and round to 5 decimal places to avoid issues with tiny numbers. Roughly 20x faster than Number.toFixed(). We also must make sure to round before dividing so that values like 0.9999999999 become 1 to avoid glitches in browser rendering and interpretation of flipped/rotated 3D matrices. And don't just multiply the number by rnd, floor it, and then divide by rnd because the bitwise operations max out at a 32-bit signed integer, thus it could get clipped at a relatively low value (like 22,000.00000 for example). } return (force2D && m.length > 6) ? [m[0], m[1], m[4], m[5], m[12], m[13]] : m; }, /** * Parses the transform values for an element, returning an object with x, y, z, scaleX, scaleY, scaleZ, rotation, rotationX, rotationY, skewX, and skewY properties. Note: by default (for performance reasons), all skewing is combined into skewX and rotation but skewY still has a place in the transform object so that we can record how much of the skew is attributed to skewX vs skewY. Remember, a skewY of 10 looks the same as a rotation of 10 and skewX of -10. * @param {!Object} t target element * @param {Object=} cs computed style object (optional) * @param {boolean=} rec if true, the transform values will be recorded to the target element's _gsTransform object, like target._gsTransform = {x:0, y:0, z:0, scaleX:1...} * @param {boolean=} parse if true, we'll ignore any _gsTransform values that already exist on the element, and force a reparsing of the css (calculated style) * @return {object} object containing all of the transform properties/values like {x:0, y:0, z:0, scaleX:1...} */ _getTransform = _internals.getTransform = function(t, cs, rec, parse) { if (t._gsTransform && rec && !parse) { return t._gsTransform; //if the element already has a _gsTransform, use that. Note: some browsers don't accurately return the calculated style for the transform (particularly for SVG), so it's almost always safest to just use the values we've already applied rather than re-parsing things. } var tm = rec ? t._gsTransform || new Transform() : new Transform(), invX = (tm.scaleX < 0), //in order to interpret things properly, we need to know if the user applied a negative scaleX previously so that we can adjust the rotation and skewX accordingly. Otherwise, if we always interpret a flipped matrix as affecting scaleY and the user only wants to tween the scaleX on multiple sequential tweens, it would keep the negative scaleY without that being the user's intent. min = 0.00002, rnd = 100000, zOrigin = _supports3D ? parseFloat(_getStyle(t, _transformOriginProp, cs, false, "0 0 0").split(" ")[2]) || tm.zOrigin || 0 : 0, defaultTransformPerspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0, m, i, scaleX, scaleY, rotation, skewX; tm.svg = !!(t.getCTM && _isSVG(t)); if (tm.svg) { _parseSVGOrigin(t, _getStyle(t, _transformOriginProp, cs, false, "50% 50%") + "", tm, t.getAttribute("data-svg-origin")); _useSVGTransformAttr = CSSPlugin.useSVGTransformAttr || _forceSVGTransformAttr; } m = _getMatrix(t); if (m !== _identity2DMatrix) { if (m.length === 16) { //we'll only look at these position-related 6 variables first because if x/y/z all match, it's relatively safe to assume we don't need to re-parse everything which risks losing important rotational information (like rotationX:180 plus rotationY:180 would look the same as rotation:180 - there's no way to know for sure which direction was taken based solely on the matrix3d() values) var a11 = m[0], a21 = m[1], a31 = m[2], a41 = m[3], a12 = m[4], a22 = m[5], a32 = m[6], a42 = m[7], a13 = m[8], a23 = m[9], a33 = m[10], a14 = m[12], a24 = m[13], a34 = m[14], a43 = m[11], angle = Math.atan2(a32, a33), t1, t2, t3, t4, cos, sin; //we manually compensate for non-zero z component of transformOrigin to work around bugs in Safari if (tm.zOrigin) { a34 = -tm.zOrigin; a14 = a13*a34-m[12]; a24 = a23*a34-m[13]; a34 = a33*a34+tm.zOrigin-m[14]; } tm.rotationX = angle * _RAD2DEG; //rotationX if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); t1 = a12*cos+a13*sin; t2 = a22*cos+a23*sin; t3 = a32*cos+a33*sin; a13 = a12*-sin+a13*cos; a23 = a22*-sin+a23*cos; a33 = a32*-sin+a33*cos; a43 = a42*-sin+a43*cos; a12 = t1; a22 = t2; a32 = t3; } //rotationY angle = Math.atan2(-a31, a33); tm.rotationY = angle * _RAD2DEG; if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); t1 = a11*cos-a13*sin; t2 = a21*cos-a23*sin; t3 = a31*cos-a33*sin; a23 = a21*sin+a23*cos; a33 = a31*sin+a33*cos; a43 = a41*sin+a43*cos; a11 = t1; a21 = t2; a31 = t3; } //rotationZ angle = Math.atan2(a21, a11); tm.rotation = angle * _RAD2DEG; if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); a11 = a11*cos+a12*sin; t2 = a21*cos+a22*sin; a22 = a21*-sin+a22*cos; a32 = a31*-sin+a32*cos; a21 = t2; } if (tm.rotationX && Math.abs(tm.rotationX) + Math.abs(tm.rotation) > 359.9) { //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here. tm.rotationX = tm.rotation = 0; tm.rotationY = 180 - tm.rotationY; } tm.scaleX = ((Math.sqrt(a11 * a11 + a21 * a21) * rnd + 0.5) | 0) / rnd; tm.scaleY = ((Math.sqrt(a22 * a22 + a23 * a23) * rnd + 0.5) | 0) / rnd; tm.scaleZ = ((Math.sqrt(a32 * a32 + a33 * a33) * rnd + 0.5) | 0) / rnd; if (tm.rotationX || tm.rotationY) { tm.skewX = 0; } else { tm.skewX = (a12 || a22) ? Math.atan2(a12, a22) * _RAD2DEG + tm.rotation : tm.skewX || 0; if (Math.abs(tm.skewX) > 90 && Math.abs(tm.skewX) < 270) { if (invX) { tm.scaleX *= -1; tm.skewX += (tm.rotation <= 0) ? 180 : -180; tm.rotation += (tm.rotation <= 0) ? 180 : -180; } else { tm.scaleY *= -1; tm.skewX += (tm.skewX <= 0) ? 180 : -180; } } } tm.perspective = a43 ? 1 / ((a43 < 0) ? -a43 : a43) : 0; tm.x = a14; tm.y = a24; tm.z = a34; if (tm.svg) { tm.x -= tm.xOrigin - (tm.xOrigin * a11 - tm.yOrigin * a12); tm.y -= tm.yOrigin - (tm.yOrigin * a21 - tm.xOrigin * a22); } } else if ((!_supports3D || parse || !m.length || tm.x !== m[4] || tm.y !== m[5] || (!tm.rotationX && !tm.rotationY))) { //sometimes a 6-element matrix is returned even when we performed 3D transforms, like if rotationX and rotationY are 180. In cases like this, we still need to honor the 3D transforms. If we just rely on the 2D info, it could affect how the data is interpreted, like scaleY might get set to -1 or rotation could get offset by 180 degrees. For example, do a TweenLite.to(element, 1, {css:{rotationX:180, rotationY:180}}) and then later, TweenLite.to(element, 1, {css:{rotationX:0}}) and without this conditional logic in place, it'd jump to a state of being unrotated when the 2nd tween starts. Then again, we need to honor the fact that the user COULD alter the transforms outside of CSSPlugin, like by manually applying new css, so we try to sense that by looking at x and y because if those changed, we know the changes were made outside CSSPlugin and we force a reinterpretation of the matrix values. Also, in Webkit browsers, if the element's "display" is "none", its calculated style value will always return empty, so if we've already recorded the values in the _gsTransform object, we'll just rely on those. var k = (m.length >= 6), a = k ? m[0] : 1, b = m[1] || 0, c = m[2] || 0, d = k ? m[3] : 1; tm.x = m[4] || 0; tm.y = m[5] || 0; scaleX = Math.sqrt(a * a + b * b); scaleY = Math.sqrt(d * d + c * c); rotation = (a || b) ? Math.atan2(b, a) * _RAD2DEG : tm.rotation || 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist). skewX = (c || d) ? Math.atan2(c, d) * _RAD2DEG + rotation : tm.skewX || 0; if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) { if (invX) { scaleX *= -1; skewX += (rotation <= 0) ? 180 : -180; rotation += (rotation <= 0) ? 180 : -180; } else { scaleY *= -1; skewX += (skewX <= 0) ? 180 : -180; } } tm.scaleX = scaleX; tm.scaleY = scaleY; tm.rotation = rotation; tm.skewX = skewX; if (_supports3D) { tm.rotationX = tm.rotationY = tm.z = 0; tm.perspective = defaultTransformPerspective; tm.scaleZ = 1; } if (tm.svg) { tm.x -= tm.xOrigin - (tm.xOrigin * a + tm.yOrigin * c); tm.y -= tm.yOrigin - (tm.xOrigin * b + tm.yOrigin * d); } } tm.zOrigin = zOrigin; //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 0 in these cases. The conditional logic here is faster than calling Math.abs(). Also, browsers tend to render a SLIGHTLY rotated object in a fuzzy way, so we need to snap to exactly 0 when appropriate. for (i in tm) { if (tm[i] < min) if (tm[i] > -min) { tm[i] = 0; } } } //DEBUG: _log("parsed rotation of " + t.getAttribute("id")+": "+(tm.rotationX)+", "+(tm.rotationY)+", "+(tm.rotation)+", scale: "+tm.scaleX+", "+tm.scaleY+", "+tm.scaleZ+", position: "+tm.x+", "+tm.y+", "+tm.z+", perspective: "+tm.perspective+ ", origin: "+ tm.xOrigin+ ","+ tm.yOrigin); if (rec) { t._gsTransform = tm; //record to the object's _gsTransform which we use so that tweens can control individual properties independently (we need all the properties to accurately recompose the matrix in the setRatio() method) if (tm.svg) { //if we're supposed to apply transforms to the SVG element's "transform" attribute, make sure there aren't any CSS transforms applied or they'll override the attribute ones. Also clear the transform attribute if we're using CSS, just to be clean. if (_useSVGTransformAttr && t.style[_transformProp]) { TweenLite.delayedCall(0.001, function(){ //if we apply this right away (before anything has rendered), we risk there being no transforms for a brief moment and it also interferes with adjusting the transformOrigin in a tween with immediateRender:true (it'd try reading the matrix and it wouldn't have the appropriate data in place because we just removed it). _removeProp(t.style, _transformProp); }); } else if (!_useSVGTransformAttr && t.getAttribute("transform")) { TweenLite.delayedCall(0.001, function(){ t.removeAttribute("transform"); }); } } } return tm; }, //for setting 2D transforms in IE6, IE7, and IE8 (must use a "filter" to emulate the behavior of modern day browser transforms) _setIETransformRatio = function(v) { var t = this.data, //refers to the element's _gsTransform object ang = -t.rotation * _DEG2RAD, skew = ang + t.skewX * _DEG2RAD, rnd = 100000, a = ((Math.cos(ang) * t.scaleX * rnd) | 0) / rnd, b = ((Math.sin(ang) * t.scaleX * rnd) | 0) / rnd, c = ((Math.sin(skew) * -t.scaleY * rnd) | 0) / rnd, d = ((Math.cos(skew) * t.scaleY * rnd) | 0) / rnd, style = this.t.style, cs = this.t.currentStyle, filters, val; if (!cs) { return; } val = b; //just for swapping the variables an inverting them (reused "val" to avoid creating another variable in memory). IE's filter matrix uses a non-standard matrix configuration (angle goes the opposite way, and b and c are reversed and inverted) b = -c; c = -val; filters = cs.filter; style.filter = ""; //remove filters so that we can accurately measure offsetWidth/offsetHeight var w = this.t.offsetWidth, h = this.t.offsetHeight, clip = (cs.position !== "absolute"), m = "progid:DXImageTransform.Microsoft.Matrix(M11=" + a + ", M12=" + b + ", M21=" + c + ", M22=" + d, ox = t.x + (w * t.xPercent / 100), oy = t.y + (h * t.yPercent / 100), dx, dy; //if transformOrigin is being used, adjust the offset x and y if (t.ox != null) { dx = ((t.oxp) ? w * t.ox * 0.01 : t.ox) - w / 2; dy = ((t.oyp) ? h * t.oy * 0.01 : t.oy) - h / 2; ox += dx - (dx * a + dy * b); oy += dy - (dx * c + dy * d); } if (!clip) { m += ", sizingMethod='auto expand')"; } else { dx = (w / 2); dy = (h / 2); //translate to ensure that transformations occur around the correct origin (default is center). m += ", Dx=" + (dx - (dx * a + dy * b) + ox) + ", Dy=" + (dy - (dx * c + dy * d) + oy) + ")"; } if (filters.indexOf("DXImageTransform.Microsoft.Matrix(") !== -1) { style.filter = filters.replace(_ieSetMatrixExp, m); } else { style.filter = m + " " + filters; //we must always put the transform/matrix FIRST (before alpha(opacity=xx)) to avoid an IE bug that slices part of the object when rotation is applied with alpha. } //at the end or beginning of the tween, if the matrix is normal (1, 0, 0, 1) and opacity is 100 (or doesn't exist), remove the filter to improve browser performance. if (v === 0 || v === 1) if (a === 1) if (b === 0) if (c === 0) if (d === 1) if (!clip || m.indexOf("Dx=0, Dy=0") !== -1) if (!_opacityExp.test(filters) || parseFloat(RegExp.$1) === 100) if (filters.indexOf("gradient(" && filters.indexOf("Alpha")) === -1) { style.removeAttribute("filter"); } //we must set the margins AFTER applying the filter in order to avoid some bugs in IE8 that could (in rare scenarios) cause them to be ignored intermittently (vibration). if (!clip) { var mult = (_ieVers < 8) ? 1 : -1, //in Internet Explorer 7 and before, the box model is broken, causing the browser to treat the width/height of the actual rotated filtered image as the width/height of the box itself, but Microsoft corrected that in IE8. We must use a negative offset in IE8 on the right/bottom marg, prop, dif; dx = t.ieOffsetX || 0; dy = t.ieOffsetY || 0; t.ieOffsetX = Math.round((w - ((a < 0 ? -a : a) * w + (b < 0 ? -b : b) * h)) / 2 + ox); t.ieOffsetY = Math.round((h - ((d < 0 ? -d : d) * h + (c < 0 ? -c : c) * w)) / 2 + oy); for (i = 0; i < 4; i++) { prop = _margins[i]; marg = cs[prop]; //we need to get the current margin in case it is being tweened separately (we want to respect that tween's changes) val = (marg.indexOf("px") !== -1) ? parseFloat(marg) : _convertToPixels(this.t, prop, parseFloat(marg), marg.replace(_suffixExp, "")) || 0; if (val !== t[prop]) { dif = (i < 2) ? -t.ieOffsetX : -t.ieOffsetY; //if another tween is controlling a margin, we cannot only apply the difference in the ieOffsets, so we essentially zero-out the dx and dy here in that case. We record the margin(s) later so that we can keep comparing them, making this code very flexible. } else { dif = (i < 2) ? dx - t.ieOffsetX : dy - t.ieOffsetY; } style[prop] = (t[prop] = Math.round( val - dif * ((i === 0 || i === 2) ? 1 : mult) )) + "px"; } } }, /* translates a super small decimal to a string WITHOUT scientific notation _safeDecimal = function(n) { var s = (n < 0 ? -n : n) + "", a = s.split("e-"); return (n < 0 ? "-0." : "0.") + new Array(parseInt(a[1], 10) || 0).join("0") + a[0].split(".").join(""); }, */ _setTransformRatio = _internals.set3DTransformRatio = _internals.setTransformRatio = function(v) { var t = this.data, //refers to the element's _gsTransform object style = this.t.style, angle = t.rotation, rotationX = t.rotationX, rotationY = t.rotationY, sx = t.scaleX, sy = t.scaleY, sz = t.scaleZ, x = t.x, y = t.y, z = t.z, isSVG = t.svg, perspective = t.perspective, force3D = t.force3D, skewY = t.skewY, skewX = t.skewX, t1, a11, a12, a13, a21, a22, a23, a31, a32, a33, a41, a42, a43, zOrigin, min, cos, sin, t2, transform, comma, zero, skew, rnd; if (skewY) { //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees. skewX += skewY; angle += skewY; } //check to see if we should render as 2D (and SVGs must use 2D when _useSVGTransformAttr is true) if (((((v === 1 || v === 0) && force3D === "auto" && (this.tween._totalTime === this.tween._totalDuration || !this.tween._totalTime)) || !force3D) && !z && !perspective && !rotationY && !rotationX && sz === 1) || (_useSVGTransformAttr && isSVG) || !_supports3D) { //on the final render (which could be 0 for a from tween), if there are no 3D aspects, render in 2D to free up memory and improve performance especially on mobile devices. Check the tween's totalTime/totalDuration too in order to make sure it doesn't happen between repeats if it's a repeating tween. //2D if (angle || skewX || isSVG) { angle *= _DEG2RAD; skew = skewX * _DEG2RAD; rnd = 100000; a11 = Math.cos(angle) * sx; a21 = Math.sin(angle) * sx; a12 = Math.sin(angle - skew) * -sy; a22 = Math.cos(angle - skew) * sy; if (skew && t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does t1 = Math.tan(skew - skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a12 *= t1; a22 *= t1; if (skewY) { t1 = Math.tan(skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a11 *= t1; a21 *= t1; } } if (isSVG) { x += t.xOrigin - (t.xOrigin * a11 + t.yOrigin * a12) + t.xOffset; y += t.yOrigin - (t.xOrigin * a21 + t.yOrigin * a22) + t.yOffset; if (_useSVGTransformAttr && (t.xPercent || t.yPercent)) { //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the matrix to simulate it. min = this.t.getBBox(); x += t.xPercent * 0.01 * min.width; y += t.yPercent * 0.01 * min.height; } min = 0.000001; if (x < min) if (x > -min) { x = 0; } if (y < min) if (y > -min) { y = 0; } } transform = (((a11 * rnd) | 0) / rnd) + "," + (((a21 * rnd) | 0) / rnd) + "," + (((a12 * rnd) | 0) / rnd) + "," + (((a22 * rnd) | 0) / rnd) + "," + x + "," + y + ")"; if (isSVG && _useSVGTransformAttr) { this.t.setAttribute("transform", "matrix(" + transform); } else { //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 5 decimal places. style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix(" : "matrix(") + transform; } } else { style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix(" : "matrix(") + sx + ",0,0," + sy + "," + x + "," + y + ")"; } return; } if (_isFirefox) { //Firefox has a bug (at least in v25) that causes it to render the transparent part of 32-bit PNG images as black when displayed inside an iframe and the 3D scale is very small and doesn't change sufficiently enough between renders (like if you use a Power4.easeInOut to scale from 0 to 1 where the beginning values only change a tiny amount to begin the tween before accelerating). In this case, we force the scale to be 0.00002 instead which is visually the same but works around the Firefox issue. min = 0.0001; if (sx < min && sx > -min) { sx = sz = 0.00002; } if (sy < min && sy > -min) { sy = sz = 0.00002; } if (perspective && !t.z && !t.rotationX && !t.rotationY) { //Firefox has a bug that causes elements to have an odd super-thin, broken/dotted black border on elements that have a perspective set but aren't utilizing 3D space (no rotationX, rotationY, or z). perspective = 0; } } if (angle || skewX) { angle *= _DEG2RAD; cos = a11 = Math.cos(angle); sin = a21 = Math.sin(angle); if (skewX) { angle -= skewX * _DEG2RAD; cos = Math.cos(angle); sin = Math.sin(angle); if (t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does t1 = Math.tan((skewX - skewY) * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); cos *= t1; sin *= t1; if (t.skewY) { t1 = Math.tan(skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a11 *= t1; a21 *= t1; } } } a12 = -sin; a22 = cos; } else if (!rotationY && !rotationX && sz === 1 && !perspective && !isSVG) { //if we're only translating and/or 2D scaling, this is faster... style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) translate3d(" : "translate3d(") + x + "px," + y + "px," + z +"px)" + ((sx !== 1 || sy !== 1) ? " scale(" + sx + "," + sy + ")" : ""); return; } else { a11 = a22 = 1; a12 = a21 = 0; } // KEY INDEX AFFECTS // a11 0 rotation, rotationY, scaleX // a21 1 rotation, rotationY, scaleX // a31 2 rotationY, scaleX // a41 3 rotationY, scaleX // a12 4 rotation, skewX, rotationX, scaleY // a22 5 rotation, skewX, rotationX, scaleY // a32 6 rotationX, scaleY // a42 7 rotationX, scaleY // a13 8 rotationY, rotationX, scaleZ // a23 9 rotationY, rotationX, scaleZ // a33 10 rotationY, rotationX, scaleZ // a43 11 rotationY, rotationX, perspective, scaleZ // a14 12 x, zOrigin, svgOrigin // a24 13 y, zOrigin, svgOrigin // a34 14 z, zOrigin // a44 15 // rotation: Math.atan2(a21, a11) // rotationY: Math.atan2(a13, a33) (or Math.atan2(a13, a11)) // rotationX: Math.atan2(a32, a33) a33 = 1; a13 = a23 = a31 = a32 = a41 = a42 = 0; a43 = (perspective) ? -1 / perspective : 0; zOrigin = t.zOrigin; min = 0.000001; //threshold below which browsers use scientific notation which won't work. comma = ","; zero = "0"; angle = rotationY * _DEG2RAD; if (angle) { cos = Math.cos(angle); sin = Math.sin(angle); a31 = -sin; a41 = a43*-sin; a13 = a11*sin; a23 = a21*sin; a33 = cos; a43 *= cos; a11 *= cos; a21 *= cos; } angle = rotationX * _DEG2RAD; if (angle) { cos = Math.cos(angle); sin = Math.sin(angle); t1 = a12*cos+a13*sin; t2 = a22*cos+a23*sin; a32 = a33*sin; a42 = a43*sin; a13 = a12*-sin+a13*cos; a23 = a22*-sin+a23*cos; a33 = a33*cos; a43 = a43*cos; a12 = t1; a22 = t2; } if (sz !== 1) { a13*=sz; a23*=sz; a33*=sz; a43*=sz; } if (sy !== 1) { a12*=sy; a22*=sy; a32*=sy; a42*=sy; } if (sx !== 1) { a11*=sx; a21*=sx; a31*=sx; a41*=sx; } if (zOrigin || isSVG) { if (zOrigin) { x += a13*-zOrigin; y += a23*-zOrigin; z += a33*-zOrigin+zOrigin; } if (isSVG) { //due to bugs in some browsers, we need to manage the transform-origin of SVG manually x += t.xOrigin - (t.xOrigin * a11 + t.yOrigin * a12) + t.xOffset; y += t.yOrigin - (t.xOrigin * a21 + t.yOrigin * a22) + t.yOffset; } if (x < min && x > -min) { x = zero; } if (y < min && y > -min) { y = zero; } if (z < min && z > -min) { z = 0; //don't use string because we calculate perspective later and need the number. } } //optimized way of concatenating all the values into a string. If we do it all in one shot, it's slower because of the way browsers have to create temp strings and the way it affects memory. If we do it piece-by-piece with +=, it's a bit slower too. We found that doing it in these sized chunks works best overall: transform = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix3d(" : "matrix3d("); transform += ((a11 < min && a11 > -min) ? zero : a11) + comma + ((a21 < min && a21 > -min) ? zero : a21) + comma + ((a31 < min && a31 > -min) ? zero : a31); transform += comma + ((a41 < min && a41 > -min) ? zero : a41) + comma + ((a12 < min && a12 > -min) ? zero : a12) + comma + ((a22 < min && a22 > -min) ? zero : a22); if (rotationX || rotationY || sz !== 1) { //performance optimization (often there's no rotationX or rotationY, so we can skip these calculations) transform += comma + ((a32 < min && a32 > -min) ? zero : a32) + comma + ((a42 < min && a42 > -min) ? zero : a42) + comma + ((a13 < min && a13 > -min) ? zero : a13); transform += comma + ((a23 < min && a23 > -min) ? zero : a23) + comma + ((a33 < min && a33 > -min) ? zero : a33) + comma + ((a43 < min && a43 > -min) ? zero : a43) + comma; } else { transform += ",0,0,0,0,1,0,"; } transform += x + comma + y + comma + z + comma + (perspective ? (1 + (-z / perspective)) : 1) + ")"; style[_transformProp] = transform; }; p = Transform.prototype; p.x = p.y = p.z = p.skewX = p.skewY = p.rotation = p.rotationX = p.rotationY = p.zOrigin = p.xPercent = p.yPercent = p.xOffset = p.yOffset = 0; p.scaleX = p.scaleY = p.scaleZ = 1; _registerComplexSpecialProp("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,svgOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType,xPercent,yPercent,smoothOrigin", {parser:function(t, e, parsingProp, cssp, pt, plugin, vars) { if (cssp._lastParsedTransform === vars) { return pt; } //only need to parse the transform once, and only if the browser supports it. cssp._lastParsedTransform = vars; var scaleFunc = (vars.scale && typeof(vars.scale) === "function") ? vars.scale : 0, //if there's a function-based "scale" value, swap in the resulting numeric value temporarily. Otherwise, if it's called for both scaleX and scaleY independently, they may not match (like if the function uses Math.random()). swapFunc; if (typeof(vars[parsingProp]) === "function") { //whatever property triggers the initial parsing might be a function-based value in which case it already got called in parse(), thus we don't want to call it again in here. The most efficient way to avoid this is to temporarily swap the value directly into the vars object, and then after we do all our parsing in this function, we'll swap it back again. swapFunc = vars[parsingProp]; vars[parsingProp] = e; } if (scaleFunc) { vars.scale = scaleFunc(_index, t); } var originalGSTransform = t._gsTransform, style = t.style, min = 0.000001, i = _transformProps.length, v = vars, endRotations = {}, transformOriginString = "transformOrigin", m1 = _getTransform(t, _cs, true, v.parseTransform), orig = v.transform && ((typeof(v.transform) === "function") ? v.transform(_index, _target) : v.transform), m2, copy, has3D, hasChange, dr, x, y, matrix, p; cssp._transform = m1; if (orig && typeof(orig) === "string" && _transformProp) { //for values like transform:"rotate(60deg) scale(0.5, 0.8)" copy = _tempDiv.style; //don't use the original target because it might be SVG in which case some browsers don't report computed style correctly. copy[_transformProp] = orig; copy.display = "block"; //if display is "none", the browser often refuses to report the transform properties correctly. copy.position = "absolute"; _doc.body.appendChild(_tempDiv); m2 = _getTransform(_tempDiv, null, false); if (m1.svg) { //if it's an SVG element, x/y part of the matrix will be affected by whatever we use as the origin and the offsets, so compensate here... x = m1.xOrigin; y = m1.yOrigin; m2.x -= m1.xOffset; m2.y -= m1.yOffset; if (v.transformOrigin || v.svgOrigin) { //if this tween is altering the origin, we must factor that in here. The actual work of recording the transformOrigin values and setting up the PropTween is done later (still inside this function) so we cannot leave the changes intact here - we only want to update the x/y accordingly. orig = {}; _parseSVGOrigin(t, _parsePosition(v.transformOrigin), orig, v.svgOrigin, v.smoothOrigin, true); x = orig.xOrigin; y = orig.yOrigin; m2.x -= orig.xOffset - m1.xOffset; m2.y -= orig.yOffset - m1.yOffset; } if (x || y) { matrix = _getMatrix(_tempDiv, true); m2.x -= x - (x * matrix[0] + y * matrix[2]); m2.y -= y - (x * matrix[1] + y * matrix[3]); } } _doc.body.removeChild(_tempDiv); if (!m2.perspective) { m2.perspective = m1.perspective; //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case. } if (v.xPercent != null) { m2.xPercent = _parseVal(v.xPercent, m1.xPercent); } if (v.yPercent != null) { m2.yPercent = _parseVal(v.yPercent, m1.yPercent); } } else if (typeof(v) === "object") { //for values like scaleX, scaleY, rotation, x, y, skewX, and skewY or transform:{...} (object) m2 = {scaleX:_parseVal((v.scaleX != null) ? v.scaleX : v.scale, m1.scaleX), scaleY:_parseVal((v.scaleY != null) ? v.scaleY : v.scale, m1.scaleY), scaleZ:_parseVal(v.scaleZ, m1.scaleZ), x:_parseVal(v.x, m1.x), y:_parseVal(v.y, m1.y), z:_parseVal(v.z, m1.z), xPercent:_parseVal(v.xPercent, m1.xPercent), yPercent:_parseVal(v.yPercent, m1.yPercent), perspective:_parseVal(v.transformPerspective, m1.perspective)}; dr = v.directionalRotation; if (dr != null) { if (typeof(dr) === "object") { for (copy in dr) { v[copy] = dr[copy]; } } else { v.rotation = dr; } } if (typeof(v.x) === "string" && v.x.indexOf("%") !== -1) { m2.x = 0; m2.xPercent = _parseVal(v.x, m1.xPercent); } if (typeof(v.y) === "string" && v.y.indexOf("%") !== -1) { m2.y = 0; m2.yPercent = _parseVal(v.y, m1.yPercent); } m2.rotation = _parseAngle(("rotation" in v) ? v.rotation : ("shortRotation" in v) ? v.shortRotation + "_short" : ("rotationZ" in v) ? v.rotationZ : m1.rotation, m1.rotation, "rotation", endRotations); if (_supports3D) { m2.rotationX = _parseAngle(("rotationX" in v) ? v.rotationX : ("shortRotationX" in v) ? v.shortRotationX + "_short" : m1.rotationX || 0, m1.rotationX, "rotationX", endRotations); m2.rotationY = _parseAngle(("rotationY" in v) ? v.rotationY : ("shortRotationY" in v) ? v.shortRotationY + "_short" : m1.rotationY || 0, m1.rotationY, "rotationY", endRotations); } m2.skewX = _parseAngle(v.skewX, m1.skewX); m2.skewY = _parseAngle(v.skewY, m1.skewY); } if (_supports3D && v.force3D != null) { m1.force3D = v.force3D; hasChange = true; } m1.skewType = v.skewType || m1.skewType || CSSPlugin.defaultSkewType; has3D = (m1.force3D || m1.z || m1.rotationX || m1.rotationY || m2.z || m2.rotationX || m2.rotationY || m2.perspective); if (!has3D && v.scale != null) { m2.scaleZ = 1; //no need to tween scaleZ. } while (--i > -1) { p = _transformProps[i]; orig = m2[p] - m1[p]; if (orig > min || orig < -min || v[p] != null || _forcePT[p] != null) { hasChange = true; pt = new CSSPropTween(m1, p, m1[p], orig, pt); if (p in endRotations) { pt.e = endRotations[p]; //directional rotations typically have compensated values during the tween, but we need to make sure they end at exactly what the user requested } pt.xs0 = 0; //ensures the value stays numeric in setRatio() pt.plugin = plugin; cssp._overwriteProps.push(pt.n); } } orig = v.transformOrigin; if (m1.svg && (orig || v.svgOrigin)) { x = m1.xOffset; //when we change the origin, in order to prevent things from jumping we adjust the x/y so we must record those here so that we can create PropTweens for them and flip them at the same time as the origin y = m1.yOffset; _parseSVGOrigin(t, _parsePosition(orig), m2, v.svgOrigin, v.smoothOrigin); pt = _addNonTweeningNumericPT(m1, "xOrigin", (originalGSTransform ? m1 : m2).xOrigin, m2.xOrigin, pt, transformOriginString); //note: if there wasn't a transformOrigin defined yet, just start with the destination one; it's wasteful otherwise, and it causes problems with fromTo() tweens. For example, TweenLite.to("#wheel", 3, {rotation:180, transformOrigin:"50% 50%", delay:1}); TweenLite.fromTo("#wheel", 3, {scale:0.5, transformOrigin:"50% 50%"}, {scale:1, delay:2}); would cause a jump when the from values revert at the beginning of the 2nd tween. pt = _addNonTweeningNumericPT(m1, "yOrigin", (originalGSTransform ? m1 : m2).yOrigin, m2.yOrigin, pt, transformOriginString); if (x !== m1.xOffset || y !== m1.yOffset) { pt = _addNonTweeningNumericPT(m1, "xOffset", (originalGSTransform ? x : m1.xOffset), m1.xOffset, pt, transformOriginString); pt = _addNonTweeningNumericPT(m1, "yOffset", (originalGSTransform ? y : m1.yOffset), m1.yOffset, pt, transformOriginString); } orig = "0px 0px"; //certain browsers (like firefox) completely botch transform-origin, so we must remove it to prevent it from contaminating transforms. We manage it ourselves with xOrigin and yOrigin } if (orig || (_supports3D && has3D && m1.zOrigin)) { //if anything 3D is happening and there's a transformOrigin with a z component that's non-zero, we must ensure that the transformOrigin's z-component is set to 0 so that we can manually do those calculations to get around Safari bugs. Even if the user didn't specifically define a "transformOrigin" in this particular tween (maybe they did it via css directly). if (_transformProp) { hasChange = true; p = _transformOriginProp; orig = (orig || _getStyle(t, p, _cs, false, "50% 50%")) + ""; //cast as string to avoid errors pt = new CSSPropTween(style, p, 0, 0, pt, -1, transformOriginString); pt.b = style[p]; pt.plugin = plugin; if (_supports3D) { copy = m1.zOrigin; orig = orig.split(" "); m1.zOrigin = ((orig.length > 2 && !(copy !== 0 && orig[2] === "0px")) ? parseFloat(orig[2]) : copy) || 0; //Safari doesn't handle the z part of transformOrigin correctly, so we'll manually handle it in the _set3DTransformRatio() method. pt.xs0 = pt.e = orig[0] + " " + (orig[1] || "50%") + " 0px"; //we must define a z value of 0px specifically otherwise iOS 5 Safari will stick with the old one (if one was defined)! pt = new CSSPropTween(m1, "zOrigin", 0, 0, pt, -1, pt.n); //we must create a CSSPropTween for the _gsTransform.zOrigin so that it gets reset properly at the beginning if the tween runs backward (as opposed to just setting m1.zOrigin here) pt.b = copy; pt.xs0 = pt.e = m1.zOrigin; } else { pt.xs0 = pt.e = orig; } //for older versions of IE (6-8), we need to manually calculate things inside the setRatio() function. We record origin x and y (ox and oy) and whether or not the values are percentages (oxp and oyp). } else { _parsePosition(orig + "", m1); } } if (hasChange) { cssp._transformType = (!(m1.svg && _useSVGTransformAttr) && (has3D || this._transformType === 3)) ? 3 : 2; //quicker than calling cssp._enableTransforms(); } if (swapFunc) { vars[parsingProp] = swapFunc; } if (scaleFunc) { vars.scale = scaleFunc; } return pt; }, prefix:true}); _registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"}); _registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) { e = this.format(e); var props = ["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"], style = t.style, ea1, i, es2, bs2, bs, es, bn, en, w, h, esfx, bsfx, rel, hn, vn, em; w = parseFloat(t.offsetWidth); h = parseFloat(t.offsetHeight); ea1 = e.split(" "); for (i = 0; i < props.length; i++) { //if we're dealing with percentages, we must convert things separately for the horizontal and vertical axis! if (this.p.indexOf("border")) { //older browsers used a prefix props[i] = _checkPropPrefix(props[i]); } bs = bs2 = _getStyle(t, props[i], _cs, false, "0px"); if (bs.indexOf(" ") !== -1) { bs2 = bs.split(" "); bs = bs2[0]; bs2 = bs2[1]; } es = es2 = ea1[i]; bn = parseFloat(bs); bsfx = bs.substr((bn + "").length); rel = (es.charAt(1) === "="); if (rel) { en = parseInt(es.charAt(0)+"1", 10); es = es.substr(2); en *= parseFloat(es); esfx = es.substr((en + "").length - (en < 0 ? 1 : 0)) || ""; } else { en = parseFloat(es); esfx = es.substr((en + "").length); } if (esfx === "") { esfx = _suffixMap[p] || bsfx; } if (esfx !== bsfx) { hn = _convertToPixels(t, "borderLeft", bn, bsfx); //horizontal number (we use a bogus "borderLeft" property just because the _convertToPixels() method searches for the keywords "Left", "Right", "Top", and "Bottom" to determine of it's a horizontal or vertical property, and we need "border" in the name so that it knows it should measure relative to the element itself, not its parent. vn = _convertToPixels(t, "borderTop", bn, bsfx); //vertical number if (esfx === "%") { bs = (hn / w * 100) + "%"; bs2 = (vn / h * 100) + "%"; } else if (esfx === "em") { em = _convertToPixels(t, "borderLeft", 1, "em"); bs = (hn / em) + "em"; bs2 = (vn / em) + "em"; } else { bs = hn + "px"; bs2 = vn + "px"; } if (rel) { es = (parseFloat(bs) + en) + esfx; es2 = (parseFloat(bs2) + en) + esfx; } } pt = _parseComplex(style, props[i], bs + " " + bs2, es + " " + es2, false, "0px", pt); } return pt; }, prefix:true, formatter:_getFormatter("0px 0px 0px 0px", false, true)}); _registerComplexSpecialProp("borderBottomLeftRadius,borderBottomRightRadius,borderTopLeftRadius,borderTopRightRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) { return _parseComplex(t.style, p, this.format(_getStyle(t, p, _cs, false, "0px 0px")), this.format(e), false, "0px", pt); }, prefix:true, formatter:_getFormatter("0px 0px", false, true)}); _registerComplexSpecialProp("backgroundPosition", {defaultValue:"0 0", parser:function(t, e, p, cssp, pt, plugin) { var bp = "background-position", cs = (_cs || _getComputedStyle(t, null)), bs = this.format( ((cs) ? _ieVers ? cs.getPropertyValue(bp + "-x") + " " + cs.getPropertyValue(bp + "-y") : cs.getPropertyValue(bp) : t.currentStyle.backgroundPositionX + " " + t.currentStyle.backgroundPositionY) || "0 0"), //Internet Explorer doesn't report background-position correctly - we must query background-position-x and background-position-y and combine them (even in IE10). Before IE9, we must do the same with the currentStyle object and use camelCase es = this.format(e), ba, ea, i, pct, overlap, src; if ((bs.indexOf("%") !== -1) !== (es.indexOf("%") !== -1) && es.split(",").length < 2) { src = _getStyle(t, "backgroundImage").replace(_urlExp, ""); if (src && src !== "none") { ba = bs.split(" "); ea = es.split(" "); _tempImg.setAttribute("src", src); //set the temp IMG's src to the background-image so that we can measure its width/height i = 2; while (--i > -1) { bs = ba[i]; pct = (bs.indexOf("%") !== -1); if (pct !== (ea[i].indexOf("%") !== -1)) { overlap = (i === 0) ? t.offsetWidth - _tempImg.width : t.offsetHeight - _tempImg.height; ba[i] = pct ? (parseFloat(bs) / 100 * overlap) + "px" : (parseFloat(bs) / overlap * 100) + "%"; } } bs = ba.join(" "); } } return this.parseComplex(t.style, bs, es, pt, plugin); }, formatter:_parsePosition}); _registerComplexSpecialProp("backgroundSize", {defaultValue:"0 0", formatter:function(v) { v += ""; //ensure it's a string return _parsePosition(v.indexOf(" ") === -1 ? v + " " + v : v); //if set to something like "100% 100%", Safari typically reports the computed style as just "100%" (no 2nd value), but we should ensure that there are two values, so copy the first one. Otherwise, it'd be interpreted as "100% 0" (wrong). }}); _registerComplexSpecialProp("perspective", {defaultValue:"0px", prefix:true}); _registerComplexSpecialProp("perspectiveOrigin", {defaultValue:"50% 50%", prefix:true}); _registerComplexSpecialProp("transformStyle", {prefix:true}); _registerComplexSpecialProp("backfaceVisibility", {prefix:true}); _registerComplexSpecialProp("userSelect", {prefix:true}); _registerComplexSpecialProp("margin", {parser:_getEdgeParser("marginTop,marginRight,marginBottom,marginLeft")}); _registerComplexSpecialProp("padding", {parser:_getEdgeParser("paddingTop,paddingRight,paddingBottom,paddingLeft")}); _registerComplexSpecialProp("clip", {defaultValue:"rect(0px,0px,0px,0px)", parser:function(t, e, p, cssp, pt, plugin){ var b, cs, delim; if (_ieVers < 9) { //IE8 and earlier don't report a "clip" value in the currentStyle - instead, the values are split apart into clipTop, clipRight, clipBottom, and clipLeft. Also, in IE7 and earlier, the values inside rect() are space-delimited, not comma-delimited. cs = t.currentStyle; delim = _ieVers < 8 ? " " : ","; b = "rect(" + cs.clipTop + delim + cs.clipRight + delim + cs.clipBottom + delim + cs.clipLeft + ")"; e = this.format(e).split(",").join(delim); } else { b = this.format(_getStyle(t, this.p, _cs, false, this.dflt)); e = this.format(e); } return this.parseComplex(t.style, b, e, pt, plugin); }}); _registerComplexSpecialProp("textShadow", {defaultValue:"0px 0px 0px #999", color:true, multi:true}); _registerComplexSpecialProp("autoRound,strictUnits", {parser:function(t, e, p, cssp, pt) {return pt;}}); //just so that we can ignore these properties (not tween them) _registerComplexSpecialProp("border", {defaultValue:"0px solid #000", parser:function(t, e, p, cssp, pt, plugin) { var bw = _getStyle(t, "borderTopWidth", _cs, false, "0px"), end = this.format(e).split(" "), esfx = end[0].replace(_suffixExp, ""); if (esfx !== "px") { //if we're animating to a non-px value, we need to convert the beginning width to that unit. bw = (parseFloat(bw) / _convertToPixels(t, "borderTopWidth", 1, esfx)) + esfx; } return this.parseComplex(t.style, this.format(bw + " " + _getStyle(t, "borderTopStyle", _cs, false, "solid") + " " + _getStyle(t, "borderTopColor", _cs, false, "#000")), end.join(" "), pt, plugin); }, color:true, formatter:function(v) { var a = v.split(" "); return a[0] + " " + (a[1] || "solid") + " " + (v.match(_colorExp) || ["#000"])[0]; }}); _registerComplexSpecialProp("borderWidth", {parser:_getEdgeParser("borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth")}); //Firefox doesn't pick up on borderWidth set in style sheets (only inline). _registerComplexSpecialProp("float,cssFloat,styleFloat", {parser:function(t, e, p, cssp, pt, plugin) { var s = t.style, prop = ("cssFloat" in s) ? "cssFloat" : "styleFloat"; return new CSSPropTween(s, prop, 0, 0, pt, -1, p, false, 0, s[prop], e); }}); //opacity-related var _setIEOpacityRatio = function(v) { var t = this.t, //refers to the element's style property filters = t.filter || _getStyle(this.data, "filter") || "", val = (this.s + this.c * v) | 0, skip; if (val === 100) { //for older versions of IE that need to use a filter to apply opacity, we should remove the filter if opacity hits 1 in order to improve performance, but make sure there isn't a transform (matrix) or gradient in the filters. if (filters.indexOf("atrix(") === -1 && filters.indexOf("radient(") === -1 && filters.indexOf("oader(") === -1) { t.removeAttribute("filter"); skip = (!_getStyle(this.data, "filter")); //if a class is applied that has an alpha filter, it will take effect (we don't want that), so re-apply our alpha filter in that case. We must first remove it and then check. } else { t.filter = filters.replace(_alphaFilterExp, ""); skip = true; } } if (!skip) { if (this.xn1) { t.filter = filters = filters || ("alpha(opacity=" + val + ")"); //works around bug in IE7/8 that prevents changes to "visibility" from being applied properly if the filter is changed to a different alpha on the same frame. } if (filters.indexOf("pacity") === -1) { //only used if browser doesn't support the standard opacity style property (IE 7 and 8). We omit the "O" to avoid case-sensitivity issues if (val !== 0 || !this.xn1) { //bugs in IE7/8 won't render the filter properly if opacity is ADDED on the same frame/render as "visibility" changes (this.xn1 is 1 if this tween is an "autoAlpha" tween) t.filter = filters + " alpha(opacity=" + val + ")"; //we round the value because otherwise, bugs in IE7/8 can prevent "visibility" changes from being applied properly. } } else { t.filter = filters.replace(_opacityExp, "opacity=" + val); } } }; _registerComplexSpecialProp("opacity,alpha,autoAlpha", {defaultValue:"1", parser:function(t, e, p, cssp, pt, plugin) { var b = parseFloat(_getStyle(t, "opacity", _cs, false, "1")), style = t.style, isAutoAlpha = (p === "autoAlpha"); if (typeof(e) === "string" && e.charAt(1) === "=") { e = ((e.charAt(0) === "-") ? -1 : 1) * parseFloat(e.substr(2)) + b; } if (isAutoAlpha && b === 1 && _getStyle(t, "visibility", _cs) === "hidden" && e !== 0) { //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience) b = 0; } if (_supportsOpacity) { pt = new CSSPropTween(style, "opacity", b, e - b, pt); } else { pt = new CSSPropTween(style, "opacity", b * 100, (e - b) * 100, pt); pt.xn1 = isAutoAlpha ? 1 : 0; //we need to record whether or not this is an autoAlpha so that in the setRatio(), we know to duplicate the setting of the alpha in order to work around a bug in IE7 and IE8 that prevents changes to "visibility" from taking effect if the filter is changed to a different alpha(opacity) at the same time. Setting it to the SAME value first, then the new value works around the IE7/8 bug. style.zoom = 1; //helps correct an IE issue. pt.type = 2; pt.b = "alpha(opacity=" + pt.s + ")"; pt.e = "alpha(opacity=" + (pt.s + pt.c) + ")"; pt.data = t; pt.plugin = plugin; pt.setRatio = _setIEOpacityRatio; } if (isAutoAlpha) { //we have to create the "visibility" PropTween after the opacity one in the linked list so that they run in the order that works properly in IE8 and earlier pt = new CSSPropTween(style, "visibility", 0, 0, pt, -1, null, false, 0, ((b !== 0) ? "inherit" : "hidden"), ((e === 0) ? "hidden" : "inherit")); pt.xs0 = "inherit"; cssp._overwriteProps.push(pt.n); cssp._overwriteProps.push(p); } return pt; }}); var _removeProp = function(s, p) { if (p) { if (s.removeProperty) { if (p.substr(0,2) === "ms" || p.substr(0,6) === "webkit") { //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example) p = "-" + p; } s.removeProperty(p.replace(_capsExp, "-$1").toLowerCase()); } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" s.removeAttribute(p); } } }, _setClassNameRatio = function(v) { this.t._gsClassPT = this; if (v === 1 || v === 0) { this.t.setAttribute("class", (v === 0) ? this.b : this.e); var mpt = this.data, //first MiniPropTween s = this.t.style; while (mpt) { if (!mpt.v) { _removeProp(s, mpt.p); } else { s[mpt.p] = mpt.v; } mpt = mpt._next; } if (v === 1 && this.t._gsClassPT === this) { this.t._gsClassPT = null; } } else if (this.t.getAttribute("class") !== this.e) { this.t.setAttribute("class", this.e); } }; _registerComplexSpecialProp("className", {parser:function(t, e, p, cssp, pt, plugin, vars) { var b = t.getAttribute("class") || "", //don't use t.className because it doesn't work consistently on SVG elements; getAttribute("class") and setAttribute("class", value") is more reliable. cssText = t.style.cssText, difData, bs, cnpt, cnptLookup, mpt; pt = cssp._classNamePT = new CSSPropTween(t, p, 0, 0, pt, 2); pt.setRatio = _setClassNameRatio; pt.pr = -11; _hasPriority = true; pt.b = b; bs = _getAllStyles(t, _cs); //if there's a className tween already operating on the target, force it to its end so that the necessary inline styles are removed and the class name is applied before we determine the end state (we don't want inline styles interfering that were there just for class-specific values) cnpt = t._gsClassPT; if (cnpt) { cnptLookup = {}; mpt = cnpt.data; //first MiniPropTween which stores the inline styles - we need to force these so that the inline styles don't contaminate things. Otherwise, there's a small chance that a tween could start and the inline values match the destination values and they never get cleaned. while (mpt) { cnptLookup[mpt.p] = 1; mpt = mpt._next; } cnpt.setRatio(1); } t._gsClassPT = pt; pt.e = (e.charAt(1) !== "=") ? e : b.replace(new RegExp("(?:\\s|^)" + e.substr(2) + "(?![\\w-])"), "") + ((e.charAt(0) === "+") ? " " + e.substr(2) : ""); t.setAttribute("class", pt.e); difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup); t.setAttribute("class", b); pt.data = difData.firstMPT; t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity). pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself) return pt; }}); var _setClearPropsRatio = function(v) { if (v === 1 || v === 0) if (this.data._totalTime === this.data._totalDuration && this.data.data !== "isFromStart") { //this.data refers to the tween. Only clear at the END of the tween (remember, from() tweens make the ratio go from 1 to 0, so we can't just check that and if the tween is the zero-duration one that's created internally to render the starting values in a from() tween, ignore that because otherwise, for example, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in). var s = this.t.style, transformParse = _specialProps.transform.parse, a, p, i, clearTransform, transform; if (this.e === "all") { s.cssText = ""; clearTransform = true; } else { a = this.e.split(" ").join("").split(","); i = a.length; while (--i > -1) { p = a[i]; if (_specialProps[p]) { if (_specialProps[p].parse === transformParse) { clearTransform = true; } else { p = (p === "transformOrigin") ? _transformOriginProp : _specialProps[p].p; //ensures that special properties use the proper browser-specific property name, like "scaleX" might be "-webkit-transform" or "boxShadow" might be "-moz-box-shadow" } } _removeProp(s, p); } } if (clearTransform) { _removeProp(s, _transformProp); transform = this.t._gsTransform; if (transform) { if (transform.svg) { this.t.removeAttribute("data-svg-origin"); this.t.removeAttribute("transform"); } delete this.t._gsTransform; } } } }; _registerComplexSpecialProp("clearProps", {parser:function(t, e, p, cssp, pt) { pt = new CSSPropTween(t, p, 0, 0, pt, 2); pt.setRatio = _setClearPropsRatio; pt.e = e; pt.pr = -10; pt.data = cssp._tween; _hasPriority = true; return pt; }}); p = "bezier,throwProps,physicsProps,physics2D".split(","); i = p.length; while (i--) { _registerPluginProp(p[i]); } p = CSSPlugin.prototype; p._firstPT = p._lastParsedTransform = p._transform = null; //gets called when the tween renders for the first time. This kicks everything off, recording start/end values, etc. p._onInitTween = function(target, vars, tween, index) { if (!target.nodeType) { //css is only for dom elements return false; } this._target = _target = target; this._tween = tween; this._vars = vars; _index = index; _autoRound = vars.autoRound; _hasPriority = false; _suffixMap = vars.suffixMap || CSSPlugin.suffixMap; _cs = _getComputedStyle(target, ""); _overwriteProps = this._overwriteProps; var style = target.style, v, pt, pt2, first, last, next, zIndex, tpt, threeD; if (_reqSafariFix) if (style.zIndex === "") { v = _getStyle(target, "zIndex", _cs); if (v === "auto" || v === "") { //corrects a bug in [non-Android] Safari that prevents it from repainting elements in their new positions if they don't have a zIndex set. We also can't just apply this inside _parseTransform() because anything that's moved in any way (like using "left" or "top" instead of transforms like "x" and "y") can be affected, so it is best to ensure that anything that's tweening has a z-index. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. Plus zIndex is less memory-intensive. this._addLazySet(style, "zIndex", 0); } } if (typeof(vars) === "string") { first = style.cssText; v = _getAllStyles(target, _cs); style.cssText = first + ";" + vars; v = _cssDif(target, v, _getAllStyles(target)).difs; if (!_supportsOpacity && _opacityValExp.test(vars)) { v.opacity = parseFloat( RegExp.$1 ); } vars = v; style.cssText = first; } if (vars.className) { //className tweens will combine any differences they find in the css with the vars that are passed in, so {className:"myClass", scale:0.5, left:20} would work. this._firstPT = pt = _specialProps.className.parse(target, vars.className, "className", this, null, null, vars); } else { this._firstPT = pt = this.parse(target, vars, null); } if (this._transformType) { threeD = (this._transformType === 3); if (!_transformProp) { style.zoom = 1; //helps correct an IE issue. } else if (_isSafari) { _reqSafariFix = true; //if zIndex isn't set, iOS Safari doesn't repaint things correctly sometimes (seemingly at random). if (style.zIndex === "") { zIndex = _getStyle(target, "zIndex", _cs); if (zIndex === "auto" || zIndex === "") { this._addLazySet(style, "zIndex", 0); } } //Setting WebkitBackfaceVisibility corrects 3 bugs: // 1) [non-Android] Safari skips rendering changes to "top" and "left" that are made on the same frame/render as a transform update. // 2) iOS Safari sometimes neglects to repaint elements in their new positions. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. // 3) Safari sometimes displayed odd artifacts when tweening the transform (or WebkitTransform) property, like ghosts of the edges of the element remained. Definitely a browser bug. //Note: we allow the user to override the auto-setting by defining WebkitBackfaceVisibility in the vars of the tween. if (_isSafariLT6) { this._addLazySet(style, "WebkitBackfaceVisibility", this._vars.WebkitBackfaceVisibility || (threeD ? "visible" : "hidden")); } } pt2 = pt; while (pt2 && pt2._next) { pt2 = pt2._next; } tpt = new CSSPropTween(target, "transform", 0, 0, null, 2); this._linkCSSP(tpt, null, pt2); tpt.setRatio = _transformProp ? _setTransformRatio : _setIETransformRatio; tpt.data = this._transform || _getTransform(target, _cs, true); tpt.tween = tween; tpt.pr = -1; //ensures that the transforms get applied after the components are updated. _overwriteProps.pop(); //we don't want to force the overwrite of all "transform" tweens of the target - we only care about individual transform properties like scaleX, rotation, etc. The CSSPropTween constructor automatically adds the property to _overwriteProps which is why we need to pop() here. } if (_hasPriority) { //reorders the linked list in order of pr (priority) while (pt) { next = pt._next; pt2 = first; while (pt2 && pt2.pr > pt.pr) { pt2 = pt2._next; } if ((pt._prev = pt2 ? pt2._prev : last)) { pt._prev._next = pt; } else { first = pt; } if ((pt._next = pt2)) { pt2._prev = pt; } else { last = pt; } pt = next; } this._firstPT = first; } return true; }; p.parse = function(target, vars, pt, plugin) { var style = target.style, p, sp, bn, en, bs, es, bsfx, esfx, isStr, rel; for (p in vars) { es = vars[p]; //ending value string if (typeof(es) === "function") { es = es(_index, _target); } sp = _specialProps[p]; //SpecialProp lookup. if (sp) { pt = sp.parse(target, es, p, this, pt, plugin, vars); } else { bs = _getStyle(target, p, _cs) + ""; isStr = (typeof(es) === "string"); if (p === "color" || p === "fill" || p === "stroke" || p.indexOf("Color") !== -1 || (isStr && _rgbhslExp.test(es))) { //Opera uses background: to define color sometimes in addition to backgroundColor: if (!isStr) { es = _parseColor(es); es = ((es.length > 3) ? "rgba(" : "rgb(") + es.join(",") + ")"; } pt = _parseComplex(style, p, bs, es, true, "transparent", pt, 0, plugin); } else if (isStr && _complexExp.test(es)) { pt = _parseComplex(style, p, bs, es, true, null, pt, 0, plugin); } else { bn = parseFloat(bs); bsfx = (bn || bn === 0) ? bs.substr((bn + "").length) : ""; //remember, bs could be non-numeric like "normal" for fontWeight, so we should default to a blank suffix in that case. if (bs === "" || bs === "auto") { if (p === "width" || p === "height") { bn = _getDimension(target, p, _cs); bsfx = "px"; } else if (p === "left" || p === "top") { bn = _calculateOffset(target, p, _cs); bsfx = "px"; } else { bn = (p !== "opacity") ? 0 : 1; bsfx = ""; } } rel = (isStr && es.charAt(1) === "="); if (rel) { en = parseInt(es.charAt(0) + "1", 10); es = es.substr(2); en *= parseFloat(es); esfx = es.replace(_suffixExp, ""); } else { en = parseFloat(es); esfx = isStr ? es.replace(_suffixExp, "") : ""; } if (esfx === "") { esfx = (p in _suffixMap) ? _suffixMap[p] : bsfx; //populate the end suffix, prioritizing the map, then if none is found, use the beginning suffix. } es = (en || en === 0) ? (rel ? en + bn : en) + esfx : vars[p]; //ensures that any += or -= prefixes are taken care of. Record the end value before normalizing the suffix because we always want to end the tween on exactly what they intended even if it doesn't match the beginning value's suffix. //if the beginning/ending suffixes don't match, normalize them... if (bsfx !== esfx) if (esfx !== "") if (en || en === 0) if (bn) { //note: if the beginning value (bn) is 0, we don't need to convert units! bn = _convertToPixels(target, p, bn, bsfx); if (esfx === "%") { bn /= _convertToPixels(target, p, 100, "%") / 100; if (vars.strictUnits !== true) { //some browsers report only "px" values instead of allowing "%" with getComputedStyle(), so we assume that if we're tweening to a %, we should start there too unless strictUnits:true is defined. This approach is particularly useful for responsive designs that use from() tweens. bs = bn + "%"; } } else if (esfx === "em" || esfx === "rem" || esfx === "vw" || esfx === "vh") { bn /= _convertToPixels(target, p, 1, esfx); //otherwise convert to pixels. } else if (esfx !== "px") { en = _convertToPixels(target, p, en, esfx); esfx = "px"; //we don't use bsfx after this, so we don't need to set it to px too. } if (rel) if (en || en === 0) { es = (en + bn) + esfx; //the changes we made affect relative calculations, so adjust the end value here. } } if (rel) { en += bn; } if ((bn || bn === 0) && (en || en === 0)) { //faster than isNaN(). Also, previously we required en !== bn but that doesn't really gain much performance and it prevents _parseToProxy() from working properly if beginning and ending values match but need to get tweened by an external plugin anyway. For example, a bezier tween where the target starts at left:0 and has these points: [{left:50},{left:0}] wouldn't work properly because when parsing the last point, it'd match the first (current) one and a non-tweening CSSPropTween would be recorded when we actually need a normal tween (type:0) so that things get updated during the tween properly. pt = new CSSPropTween(style, p, bn, en - bn, pt, 0, p, (_autoRound !== false && (esfx === "px" || p === "zIndex")), 0, bs, es); pt.xs0 = esfx; //DEBUG: _log("tween "+p+" from "+pt.b+" ("+bn+esfx+") to "+pt.e+" with suffix: "+pt.xs0); } else if (style[p] === undefined || !es && (es + "" === "NaN" || es == null)) { _log("invalid " + p + " tween value: " + vars[p]); } else { pt = new CSSPropTween(style, p, en || bn || 0, 0, pt, -1, p, false, 0, bs, es); pt.xs0 = (es === "none" && (p === "display" || p.indexOf("Style") !== -1)) ? bs : es; //intermediate value should typically be set immediately (end value) except for "display" or things like borderTopStyle, borderBottomStyle, etc. which should use the beginning value during the tween. //DEBUG: _log("non-tweening value "+p+": "+pt.xs0); } } } if (plugin) if (pt && !pt.plugin) { pt.plugin = plugin; } } return pt; }; //gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1. p.setRatio = function(v) { var pt = this._firstPT, min = 0.000001, val, str, i; //at the end of the tween, we set the values to exactly what we received in order to make sure non-tweening values (like "position" or "float" or whatever) are set and so that if the beginning/ending suffixes (units) didn't match and we normalized to px, the value that the user passed in is used here. We check to see if the tween is at its beginning in case it's a from() tween in which case the ratio will actually go from 1 to 0 over the course of the tween (backwards). if (v === 1 && (this._tween._time === this._tween._duration || this._tween._time === 0)) { while (pt) { if (pt.type !== 2) { if (pt.r && pt.type !== -1) { val = Math.round(pt.s + pt.c); if (!pt.type) { pt.t[pt.p] = val + pt.xs0; } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)" i = pt.l; str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = str; } } else { pt.t[pt.p] = pt.e; } } else { pt.setRatio(v); } pt = pt._next; } } else if (v || !(this._tween._time === this._tween._duration || this._tween._time === 0) || this._tween._rawPrevTime === -0.000001) { while (pt) { val = pt.c * v + pt.s; if (pt.r) { val = Math.round(val); } else if (val < min) if (val > -min) { val = 0; } if (!pt.type) { pt.t[pt.p] = val + pt.xs0; } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)" i = pt.l; if (i === 2) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2; } else if (i === 3) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3; } else if (i === 4) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4; } else if (i === 5) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4 + pt.xn4 + pt.xs5; } else { str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = str; } } else if (pt.type === -1) { //non-tweening value pt.t[pt.p] = pt.xs0; } else if (pt.setRatio) { //custom setRatio() for things like SpecialProps, external plugins, etc. pt.setRatio(v); } pt = pt._next; } //if the tween is reversed all the way back to the beginning, we need to restore the original values which may have different units (like % instead of px or em or whatever). } else { while (pt) { if (pt.type !== 2) { pt.t[pt.p] = pt.b; } else { pt.setRatio(v); } pt = pt._next; } } }; /** * @private * Forces rendering of the target's transforms (rotation, scale, etc.) whenever the CSSPlugin's setRatio() is called. * Basically, this tells the CSSPlugin to create a CSSPropTween (type 2) after instantiation that runs last in the linked * list and calls the appropriate (3D or 2D) rendering function. We separate this into its own method so that we can call * it from other plugins like BezierPlugin if, for example, it needs to apply an autoRotation and this CSSPlugin * doesn't have any transform-related properties of its own. You can call this method as many times as you * want and it won't create duplicate CSSPropTweens. * * @param {boolean} threeD if true, it should apply 3D tweens (otherwise, just 2D ones are fine and typically faster) */ p._enableTransforms = function(threeD) { this._transform = this._transform || _getTransform(this._target, _cs, true); //ensures that the element has a _gsTransform property with the appropriate values. this._transformType = (!(this._transform.svg && _useSVGTransformAttr) && (threeD || this._transformType === 3)) ? 3 : 2; }; var lazySet = function(v) { this.t[this.p] = this.e; this.data._linkCSSP(this, this._next, null, true); //we purposefully keep this._next even though it'd make sense to null it, but this is a performance optimization, as this happens during the while (pt) {} loop in setRatio() at the bottom of which it sets pt = pt._next, so if we null it, the linked list will be broken in that loop. }; /** @private Gives us a way to set a value on the first render (and only the first render). **/ p._addLazySet = function(t, p, v) { var pt = this._firstPT = new CSSPropTween(t, p, 0, 0, this._firstPT, 2); pt.e = v; pt.setRatio = lazySet; pt.data = this; }; /** @private **/ p._linkCSSP = function(pt, next, prev, remove) { if (pt) { if (next) { next._prev = pt; } if (pt._next) { pt._next._prev = pt._prev; } if (pt._prev) { pt._prev._next = pt._next; } else if (this._firstPT === pt) { this._firstPT = pt._next; remove = true; //just to prevent resetting this._firstPT 5 lines down in case pt._next is null. (optimized for speed) } if (prev) { prev._next = pt; } else if (!remove && this._firstPT === null) { this._firstPT = pt; } pt._next = next; pt._prev = prev; } return pt; }; p._mod = function(lookup) { var pt = this._firstPT; while (pt) { if (typeof(lookup[pt.p]) === "function" && lookup[pt.p] === Math.round) { //only gets called by RoundPropsPlugin (ModifyPlugin manages all the rendering internally for CSSPlugin properties that need modification). Remember, we handle rounding a bit differently in this plugin for performance reasons, leveraging "r" as an indicator that the value should be rounded internally.. pt.r = 1; } pt = pt._next; } }; //we need to make sure that if alpha or autoAlpha is killed, opacity is too. And autoAlpha affects the "visibility" property. p._kill = function(lookup) { var copy = lookup, pt, p, xfirst; if (lookup.autoAlpha || lookup.alpha) { copy = {}; for (p in lookup) { //copy the lookup so that we're not changing the original which may be passed elsewhere. copy[p] = lookup[p]; } copy.opacity = 1; if (copy.autoAlpha) { copy.visibility = 1; } } if (lookup.className && (pt = this._classNamePT)) { //for className tweens, we need to kill any associated CSSPropTweens too; a linked list starts at the className's "xfirst". xfirst = pt.xfirst; if (xfirst && xfirst._prev) { this._linkCSSP(xfirst._prev, pt._next, xfirst._prev._prev); //break off the prev } else if (xfirst === this._firstPT) { this._firstPT = pt._next; } if (pt._next) { this._linkCSSP(pt._next, pt._next._next, xfirst._prev); } this._classNamePT = null; } pt = this._firstPT; while (pt) { if (pt.plugin && pt.plugin !== p && pt.plugin._kill) { //for plugins that are registered with CSSPlugin, we should notify them of the kill. pt.plugin._kill(lookup); p = pt.plugin; } pt = pt._next; } return TweenPlugin.prototype._kill.call(this, copy); }; //used by cascadeTo() for gathering all the style properties of each child element into an array for comparison. var _getChildStyles = function(e, props, targets) { var children, i, child, type; if (e.slice) { i = e.length; while (--i > -1) { _getChildStyles(e[i], props, targets); } return; } children = e.childNodes; i = children.length; while (--i > -1) { child = children[i]; type = child.type; if (child.style) { props.push(_getAllStyles(child)); if (targets) { targets.push(child); } } if ((type === 1 || type === 9 || type === 11) && child.childNodes.length) { _getChildStyles(child, props, targets); } } }; /** * Typically only useful for className tweens that may affect child elements, this method creates a TweenLite * and then compares the style properties of all the target's child elements at the tween's start and end, and * if any are different, it also creates tweens for those and returns an array containing ALL of the resulting * tweens (so that you can easily add() them to a TimelineLite, for example). The reason this functionality is * wrapped into a separate static method of CSSPlugin instead of being integrated into all regular className tweens * is because it creates entirely new tweens that may have completely different targets than the original tween, * so if they were all lumped into the original tween instance, it would be inconsistent with the rest of the API * and it would create other problems. For example: * - If I create a tween of elementA, that tween instance may suddenly change its target to include 50 other elements (unintuitive if I specifically defined the target I wanted) * - We can't just create new independent tweens because otherwise, what happens if the original/parent tween is reversed or pause or dropped into a TimelineLite for tight control? You'd expect that tween's behavior to affect all the others. * - Analyzing every style property of every child before and after the tween is an expensive operation when there are many children, so this behavior shouldn't be imposed on all className tweens by default, especially since it's probably rare that this extra functionality is needed. * * @param {Object} target object to be tweened * @param {number} Duration in seconds (or frames for frames-based tweens) * @param {Object} Object containing the end values, like {className:"newClass", ease:Linear.easeNone} * @return {Array} An array of TweenLite instances */ CSSPlugin.cascadeTo = function(target, duration, vars) { var tween = TweenLite.to(target, duration, vars), results = [tween], b = [], e = [], targets = [], _reservedProps = TweenLite._internals.reservedProps, i, difs, p, from; target = tween._targets || tween.target; _getChildStyles(target, b, targets); tween.render(duration, true, true); _getChildStyles(target, e); tween.render(0, true, true); tween._enabled(true); i = targets.length; while (--i > -1) { difs = _cssDif(targets[i], b[i], e[i]); if (difs.firstMPT) { difs = difs.difs; for (p in vars) { if (_reservedProps[p]) { difs[p] = vars[p]; } } from = {}; for (p in difs) { from[p] = b[i][p]; } results.push(TweenLite.fromTo(targets[i], duration, from, difs)); } } return results; }; TweenPlugin.activate([CSSPlugin]); return CSSPlugin; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("CSSPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.6.4 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("plugins.CSSRulePlugin", ["plugins.TweenPlugin","TweenLite","plugins.CSSPlugin"], function(TweenPlugin, TweenLite, CSSPlugin) { /** @constructor **/ var CSSRulePlugin = function() { TweenPlugin.call(this, "cssRule"); this._overwriteProps.length = 0; }, _doc = _gsScope.document, _superSetRatio = CSSPlugin.prototype.setRatio, p = CSSRulePlugin.prototype = new CSSPlugin(); p._propName = "cssRule"; p.constructor = CSSRulePlugin; CSSRulePlugin.version = "0.6.4"; CSSRulePlugin.API = 2; /** * Searches the style sheets in the document for a particular selector like ".myClass" or "a" or "a:hover" or ":after" and * returns a reference to that style sheet (or an array of them in the case of a pseudo selector like ":after"). Then you * can animate the individual properties of the style sheet. * * @param {!string} selector a string describing the selector, like ".myClass" or "a" or "a:hover" or ":after" * @return a reference to the style sheet (or an array of them in the case of a pseudo selector). If none was found, null is returned (or an empty array for a pseudo selector) */ CSSRulePlugin.getRule = function(selector) { var ruleProp = _doc.all ? 'rules' : 'cssRules', ss = _doc.styleSheets, i = ss.length, pseudo = (selector.charAt(0) === ":"), j, curSS, cs, a; selector = (pseudo ? "" : ",") + selector.toLowerCase() + ","; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase. if (pseudo) { a = []; } while (--i > -1) { //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. try { curSS = ss[i][ruleProp]; if (!curSS) { continue; } j = curSS.length; } catch (e) { console.log(e); continue; } while (--j > -1) { cs = curSS[j]; if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out. if (pseudo) { a.push(cs.style); } else { return cs.style; } } } } return a; }; // @private gets called when the tween renders for the first time. This kicks everything off, recording start/end values, etc. p._onInitTween = function(target, value, tween) { if (target.cssText === undefined) { return false; } var div = target._gsProxy = target._gsProxy || _doc.createElement("div"); this._ss = target; this._proxy = div.style; div.style.cssText = target.cssText; CSSPlugin.prototype._onInitTween.call(this, div, value, tween); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the setRatio() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both return true; }; // @private gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1. p.setRatio = function(v) { _superSetRatio.call(this, v); this._ss.cssText = this._proxy.cssText; }; TweenPlugin.activate([CSSRulePlugin]); return CSSRulePlugin; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("CSSRulePlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 | 1 1 1 1 20 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: beta 1.5.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _numExp = /(\d|\.)+/g, _relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g, _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, _hue = function(h, m1, m2) { h = (h < 0) ? h + 1 : (h > 1) ? h - 1 : h; return ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : (h < 0.5) ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * 255) + 0.5) | 0; }, /** * @private Parses a color (like #9F0, #FF9900, rgb(255,51,153) or hsl(108, 50%, 10%)) into an array with 3 elements for red, green, and blue or if toHSL parameter is true, it will populate the array with hue, saturation, and lightness values. If a relative value is found in an hsl() or hsla() string, it will preserve those relative prefixes and all the values in the array will be strings instead of numbers (in all other cases it will be populated with numbers). * @param {(string|number)} v The value the should be parsed which could be a string like #9F0 or rgb(255,102,51) or rgba(255,0,0,0.5) or it could be a number like 0xFF00CC or even a named color like red, blue, purple, etc. * @param {(boolean)} toHSL If true, an hsl() or hsla() value will be returned instead of rgb() or rgba() * @return {Array.<number>} An array containing red, green, and blue (and optionally alpha) in that order, or if the toHSL parameter was true, the array will contain hue, saturation and lightness (and optionally alpha) in that order. Always numbers unless there's a relative prefix found in an hsl() or hsla() string and toHSL is true. */ _parseColor = function(v, toHSL) { var a, r, g, b, h, s, l, max, min, d, wasHSL; if (!v) { a = _colorLookup.black; } else if (typeof(v) === "number") { a = [v >> 16, (v >> 8) & 255, v & 255]; } else { if (v.charAt(v.length - 1) === ",") { //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value. v = v.substr(0, v.length - 1); } if (_colorLookup[v]) { a = _colorLookup[v]; } else if (v.charAt(0) === "#") { if (v.length === 4) { //for shorthand like #9F0 r = v.charAt(1); g = v.charAt(2); b = v.charAt(3); v = "#" + r + r + g + g + b + b; } v = parseInt(v.substr(1), 16); a = [v >> 16, (v >> 8) & 255, v & 255]; } else if (v.substr(0, 3) === "hsl") { a = wasHSL = v.match(_numExp); if (!toHSL) { h = (Number(a[0]) % 360) / 360; s = Number(a[1]) / 100; l = Number(a[2]) / 100; g = (l <= 0.5) ? l * (s + 1) : l + s - l * s; r = l * 2 - g; if (a.length > 3) { a[3] = Number(v[3]); } a[0] = _hue(h + 1 / 3, r, g); a[1] = _hue(h, r, g); a[2] = _hue(h - 1 / 3, r, g); } else if (v.indexOf("=") !== -1) { //if relative values are found, just return the raw strings with the relative prefixes in place. return v.match(_relNumExp); } } else { a = v.match(_numExp) || _colorLookup.transparent; } a[0] = Number(a[0]); a[1] = Number(a[1]); a[2] = Number(a[2]); if (a.length > 3) { a[3] = Number(a[3]); } } if (toHSL && !wasHSL) { r = a[0] / 255; g = a[1] / 255; b = a[2] / 255; max = Math.max(r, g, b); min = Math.min(r, g, b); l = (max + min) / 2; if (max === min) { h = s = 0; } else { d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); h = (max === r) ? (g - b) / d + (g < b ? 6 : 0) : (max === g) ? (b - r) / d + 2 : (r - g) / d + 4; h *= 60; } a[0] = (h + 0.5) | 0; a[1] = (s * 100 + 0.5) | 0; a[2] = (l * 100 + 0.5) | 0; } return a; }, _formatColors = function(s, toHSL) { var colors = (s + "").match(_colorExp) || [], charIndex = 0, parsed = colors.length ? "" : s, i, color, temp; for (i = 0; i < colors.length; i++) { color = colors[i]; temp = s.substr(charIndex, s.indexOf(color, charIndex)-charIndex); charIndex += temp.length + color.length; color = _parseColor(color, toHSL); if (color.length === 3) { color.push(1); } parsed += temp + (toHSL ? "hsla(" + color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : "rgba(" + color.join(",")) + ")"; } return parsed + s.substr(charIndex); }, p, _colorStringFilter, TweenLite = _gsScope.TweenLite, _colorExp = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b", //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc. ColorPropsPlugin = _gsScope._gsDefine.plugin({ propName: "colorProps", version: "1.5.0", priority: -1, API: 2, global: true, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var p, proxy, pt, val; this._target = target; this._proxy = proxy = ((value.format + "").toUpperCase() === "NUMBER") ? {} : 0; for (p in value) { if (p !== "format") { if (proxy) { this._firstNumPT = pt = {_next:this._firstNumPT, t:target, p:p, f:(typeof(target[p]) === "function")}; proxy[p] = "rgb(" + _parseColor(!pt.f ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]()).join(",") + ")"; val = value[p]; if (typeof(val) === "function") { val = val(index, target); } this._addTween(proxy, p, "get", ((typeof(val) === "number") ? "rgb(" + _parseColor(val, false).join(",") + ")" : val), p, null, null, _colorStringFilter); } else { this._addTween(target, p, "get", value[p], p, null, null, _colorStringFilter, index); } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var pt = this._firstNumPT, val; this._super.setRatio.call(this, v); while (pt) { val = _parseColor(this._proxy[pt.p], false); val = val[0] << 16 | val[1] << 8 | val[2]; if (pt.f) { this._target[pt.p](val); } else { this._target[pt.p] = val; } pt = pt._next; } } }); for (p in _colorLookup) { _colorExp += "|" + p + "\\b"; } _colorExp = new RegExp(_colorExp+")", "gi"); ColorPropsPlugin.colorStringFilter = _colorStringFilter = function(a) { var combined = a[0] + a[1], toHSL; _colorExp.lastIndex = 0; if (_colorExp.test(combined)) { toHSL = (combined.indexOf("hsl(") !== -1 || combined.indexOf("hsla(") !== -1); a[0] = _formatColors(a[0], toHSL); a[1] = _formatColors(a[1], toHSL); } }; Iif (!TweenLite.defaultStringFilter) { TweenLite.defaultStringFilter = ColorPropsPlugin.colorStringFilter; } ColorPropsPlugin.parseColor = _parseColor; p = ColorPropsPlugin.prototype; p._firstNumPT = null; p._kill = function(lookup) { var pt = this._firstNumPT, prev; while (pt) { if (pt.p in lookup) { if (pt === p._firstNumPT) { this._firstNumPT = pt._next; } if (prev) { prev._next = pt._next; } } else { prev = pt; } pt = pt._next; } return this._super._kill(lookup); }; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("ColorPropsPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.3.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine.plugin({ propName: "directionalRotation", version: "0.3.0", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { if (typeof(value) !== "object") { value = {rotation:value}; } this.finals = {}; var cap = (value.useRadians === true) ? Math.PI * 2 : 360, min = 0.000001, p, v, start, end, dif, split; for (p in value) { if (p !== "useRadians") { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } split = (end + "").split("_"); v = split[0]; start = parseFloat( (typeof(target[p]) !== "function") ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]() ); end = this.finals[p] = (typeof(v) === "string" && v.charAt(1) === "=") ? start + parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : Number(v) || 0; dif = end - start; if (split.length) { v = split.join("_"); if (v.indexOf("short") !== -1) { dif = dif % cap; if (dif !== dif % (cap / 2)) { dif = (dif < 0) ? dif + cap : dif - cap; } } if (v.indexOf("_cw") !== -1 && dif < 0) { dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } else if (v.indexOf("ccw") !== -1 && dif > 0) { dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } } if (dif > min || dif < -min) { this._addTween(target, p, start, start + dif, p); this._overwriteProps.push(p); } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(ratio) { var pt; if (ratio !== 1) { this._super.setRatio.call(this, ratio); } else { pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](this.finals[pt.p]); } else { pt.t[pt.p] = this.finals[pt.p]; } pt = pt._next; } } } })._autoCSS = true; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("DirectionalRotationPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 | 2 2 2 2 4 2 2 | /*! * VERSION: 0.15.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * Requires TweenLite and CSSPlugin version 1.17.0 or later (TweenMax contains both TweenLite and CSSPlugin). ThrowPropsPlugin is required for momentum-based continuation of movement after the mouse/touch is released (ThrowPropsPlugin is a membership benefit of Club GreenSock - http://greensock.com/club/). * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite","plugins.CSSPlugin"], function(EventDispatcher, TweenLite, CSSPlugin) { var _tempVarsXY = {css:{}}, //speed optimization - we reuse the same vars object for x/y TweenLite.set() calls to minimize garbage collection tasks and improve performance. _tempVarsX = {css:{}}, _tempVarsY = {css:{}}, _tempVarsRotation = {css:{}}, _globals = _gsScope._gsDefine.globals, _tempEvent = {}, //for populating with pageX/pageY in old versions of IE _dummyElement = {style:{}}, _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, _docElement = _doc.documentElement || {}, _createElement = function(type) { return _doc.createElementNS ? _doc.createElementNS("http://www.w3.org/1999/xhtml", type) : _doc.createElement(type); }, _tempDiv = _createElement("div"), _emptyArray = [], _emptyFunc = function() { return false; }, _RAD2DEG = 180 / Math.PI, _max = 999999999999999, _getTime = Date.now || function() {return new Date().getTime();}, _isOldIE = !!(!_doc.addEventListener && _doc.all), _placeholderDiv = _doc.createElement("div"), _renderQueue = [], _lookup = {}, //when a Draggable is created, the target gets a unique _gsDragID property that allows gets associated with the Draggable instance for quick lookups in Draggable.get(). This avoids circular references that could cause gc problems. _lookupCount = 0, _clickableTagExp = /^(?:a|input|textarea|button|select)$/i, _dragCount = 0, //total number of elements currently being dragged _prefix, _isMultiTouching, _isAndroid = (navigator.userAgent.toLowerCase().indexOf("android") !== -1), //Android handles touch events in an odd way and it's virtually impossible to "feature test" so we resort to UA sniffing _lastDragTime = 0, _temp1 = {}, // a simple object we reuse and populate (usually x/y properties) to conserve memory and improve performance. _windowProxy = {}, //memory/performance optimization - we reuse this object during autoScroll to store window-related bounds/offsets. _slice = function(a) { //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() if (typeof(a) === "string") { a = TweenLite.selector(a); } if (!a || a.nodeType) { //if it's not an array, wrap it in one. return [a]; } var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, _copy = function(obj, factor) { var copy = {}, p; if (factor) { for (p in obj) { copy[p] = obj[p] * factor; } } else { for (p in obj) { copy[p] = obj[p]; } } return copy; }, ThrowPropsPlugin, _renderQueueTick = function() { var i = _renderQueue.length; while (--i > -1) { _renderQueue[i](); } }, _addToRenderQueue = function(func) { _renderQueue.push(func); if (_renderQueue.length === 1) { TweenLite.ticker.addEventListener("tick", _renderQueueTick, this, false, 1); } }, _removeFromRenderQueue = function(func) { var i = _renderQueue.length; while (--i > -1) { if (_renderQueue[i] === func) { _renderQueue.splice(i, 1); } } TweenLite.to(_renderQueueTimeout, 0, {overwrite:"all", delay:15, onComplete:_renderQueueTimeout}); //remove the "tick" listener only after the render queue is empty for 15 seconds (to improve performance). Adding/removing it constantly for every click/touch wouldn't deliver optimal speed, and we also don't want the ticker to keep calling the render method when things are idle for long periods of time (we want to improve battery life on mobile devices). }, _renderQueueTimeout = function() { if (!_renderQueue.length) { TweenLite.ticker.removeEventListener("tick", _renderQueueTick); } }, _extend = function(obj, defaults) { var p; for (p in defaults) { if (obj[p] === undefined) { obj[p] = defaults[p]; } } return obj; }, _getDocScrollTop = function() { return (window.pageYOffset != null) ? window.pageYOffset : (_doc.scrollTop != null) ? _doc.scrollTop : _docElement.scrollTop || _doc.body.scrollTop || 0; }, _getDocScrollLeft = function() { return (window.pageXOffset != null) ? window.pageXOffset : (_doc.scrollLeft != null) ? _doc.scrollLeft : _docElement.scrollLeft || _doc.body.scrollLeft || 0; }, _addScrollListener = function(e, callback) { _addListener(e, "scroll", callback); if (!_isRoot(e.parentNode)) { _addScrollListener(e.parentNode, callback); } }, _removeScrollListener = function(e, callback) { _removeListener(e, "scroll", callback); if (!_isRoot(e.parentNode)) { _removeScrollListener(e.parentNode, callback); } }, _isRoot = function (e) { return !!(!e || e === _docElement || e === _doc || e === _doc.body || e === window || !e.nodeType || !e.parentNode); }, _getMaxScroll = function(element, axis) { var dim = (axis === "x") ? "Width" : "Height", scroll = "scroll" + dim, client = "client" + dim, body = _doc.body; return Math.max(0, _isRoot(element) ? Math.max(_docElement[scroll], body[scroll]) - (window["inner" + dim] || _docElement[client] || body[client]) : element[scroll] - element[client]); }, _recordMaxScrolls = function(e) { //records _gsMaxScrollX and _gsMaxScrollY properties for the element and all ancestors up the chain so that we can cap it, otherwise dragging beyond the edges with autoScroll on can endlessly scroll. var isRoot = _isRoot(e), x = _getMaxScroll(e, "x"), y = _getMaxScroll(e, "y"); if (isRoot) { e = _windowProxy; } else { _recordMaxScrolls(e.parentNode); } e._gsMaxScrollX = x; e._gsMaxScrollY = y; e._gsScrollX = e.scrollLeft || 0; e._gsScrollY = e.scrollTop || 0; }, //just used for IE8 and earlier to normalize events and populate pageX/pageY _populateIEEvent = function(e, preventDefault) { e = e || window.event; _tempEvent.pageX = e.clientX + _doc.body.scrollLeft + _docElement.scrollLeft; _tempEvent.pageY = e.clientY + _doc.body.scrollTop + _docElement.scrollTop; if (preventDefault) { e.returnValue = false; } return _tempEvent; }, //grabs the first element it finds (and we include the window as an element), so if it's selector text, it'll feed that value to TweenLite.selector, if it's a jQuery object or some other selector engine's result, it'll grab the first one, and same for an array. If the value doesn't contain a DOM element, it'll just return null. _unwrapElement = function(value) { if (!value) { return value; } if (typeof(value) === "string") { value = TweenLite.selector(value); } if (value.length && value !== window && value[0] && value[0].style && !value.nodeType) { value = value[0]; } return (value === window || (value.nodeType && value.style)) ? value : null; }, _checkPrefix = function(e, p) { var s = e.style, capped, i, a; if (s[p] === undefined) { a = ["O","Moz","ms","Ms","Webkit"]; i = 5; capped = p.charAt(0).toUpperCase() + p.substr(1); while (--i > -1 && s[a[i]+capped] === undefined) { } if (i < 0) { return ""; } _prefix = (i === 3) ? "ms" : a[i]; p = _prefix + capped; } return p; }, _setStyle = function(e, p, value) { var s = e.style; if (!s) { return; } if (s[p] === undefined) { p = _checkPrefix(e, p); } if (value == null) { if (s.removeProperty) { s.removeProperty(p.replace(/([A-Z])/g, "-$1").toLowerCase()); } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" s.removeAttribute(p); } } else if (s[p] !== undefined) { s[p] = value; } }, _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : _emptyFunc, _horizExp = /(?:Left|Right|Width)/i, _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g, _convertToPixels = function(t, p, v, sfx, recurse) { if (sfx === "px" || !sfx) { return v; } if (sfx === "auto" || !v) { return 0; } var horiz = _horizExp.test(p), node = t, style = _tempDiv.style, neg = (v < 0), pix; if (neg) { v = -v; } if (sfx === "%" && p.indexOf("border") !== -1) { pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight); } else { style.cssText = "border:0 solid red;position:" + _getStyle(t, "position", true) + ";line-height:0;"; if (sfx === "%" || !node.appendChild) { node = t.parentNode || _doc.body; style[(horiz ? "width" : "height")] = v + sfx; } else { style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx; } node.appendChild(_tempDiv); pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]); node.removeChild(_tempDiv); if (pix === 0 && !recurse) { pix = _convertToPixels(t, p, v, sfx, true); } } return neg ? -pix : pix; }, _calculateOffset = function(t, p) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop if (_getStyle(t, "position", true) !== "absolute") { return 0; } var dim = ((p === "left") ? "Left" : "Top"), v = _getStyle(t, "margin" + dim, true); return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), (v + "").replace(_suffixExp, "")) || 0); }, _getStyle = function(element, prop, keepUnits) { var rv = (element._gsTransform || {})[prop], cs; if (rv || rv === 0) { return rv; } else if (element.style[prop]) { rv = element.style[prop]; } else if ((cs = _getComputedStyle(element))) { rv = cs.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase()); rv = (rv || cs.length) ? rv : cs[prop]; //Opera behaves VERY strangely - length is usually 0 and cs[prop] is the only way to get accurate results EXCEPT when checking for -o-transform which only works with cs.getPropertyValue()! } else if (element.currentStyle) { rv = element.currentStyle[prop]; } if (rv === "auto" && (prop === "top" || prop === "left")) { rv = _calculateOffset(element, prop); } return keepUnits ? rv : parseFloat(rv) || 0; }, _dispatchEvent = function(instance, type, callbackName) { var vars = instance.vars, callback = vars[callbackName], listeners = instance._listeners[type]; if (typeof(callback) === "function") { callback.apply(vars[callbackName + "Scope"] || vars.callbackScope || instance, vars[callbackName + "Params"] || [instance.pointerEvent]); } if (listeners) { instance.dispatchEvent(type); } }, _getBounds = function(obj, context) { //accepts any of the following: a DOM element, jQuery object, selector text, or an object defining bounds as {top, left, width, height} or {minX, maxX, minY, maxY}. Returns an object with left, top, width, and height properties. var e = _unwrapElement(obj), top, left, offset; if (!e) { if (obj.left !== undefined) { offset = _getOffsetTransformOrigin(context); //the bounds should be relative to the origin return {left: obj.left - offset.x, top: obj.top - offset.y, width: obj.width, height: obj.height}; } left = obj.min || obj.minX || obj.minRotation || 0; top = obj.min || obj.minY || 0; return {left:left, top:top, width:(obj.max || obj.maxX || obj.maxRotation || 0) - left, height:(obj.max || obj.maxY || 0) - top}; } return _getElementBounds(e, context); }, _svgBorderFactor, _svgBorderScales, _svgScrollOffset, _hasBorderBug, _hasReparentBug,//some browsers, like Chrome 49, alter the offsetTop/offsetLeft/offsetParent of elements when a non-identity transform is applied. _setEnvironmentVariables = function() { //some browsers factor the border into the SVG coordinate space, some don't (like Firefox). Some apply transforms to them, some don't. We feature-detect here so we know how to handle the border(s). We can't do this immediately - we must wait for the document.body to exist. if (!_doc.createElementNS) { _svgBorderFactor = 0; _svgBorderScales = false; return; } var div = _createElement("div"), svg = _doc.createElementNS("http://www.w3.org/2000/svg", "svg"), wrapper = _createElement("div"), style = div.style, parent = _doc.body || _docElement, matrix, e1, point, oldValue; if (_doc.body && _transformProp) { style.position = "absolute"; parent.appendChild(wrapper); wrapper.appendChild(div); oldValue = div.offsetParent; wrapper.style[_transformProp] = "rotate(1deg)"; _hasReparentBug = (div.offsetParent === oldValue); wrapper.style.position = "absolute"; style.height = "10px"; oldValue = div.offsetTop; wrapper.style.border = "5px solid red"; _hasBorderBug = (oldValue !== div.offsetTop); //some browsers, like Firefox 38, cause the offsetTop/Left to be affected by a parent's border. parent.removeChild(wrapper); } style = svg.style; svg.setAttributeNS(null, "width", "400px"); svg.setAttributeNS(null, "height", "400px"); svg.setAttributeNS(null, "viewBox", "0 0 400 400"); style.display = "block"; style.boxSizing = "border-box"; style.border = "0px solid red"; style.transform = "none"; // in some browsers (like certain flavors of Android), the getScreenCTM() matrix is contaminated by the scroll position. We can run some logic here to detect that condition, but we ended up not needing this because we found another workaround using getBoundingClientRect(). div.style.cssText = "width:100px;height:100px;overflow:scroll;-ms-overflow-style:none;"; parent.appendChild(div); div.appendChild(svg); point = svg.createSVGPoint().matrixTransform(svg.getScreenCTM()); e1 = point.y; div.scrollTop = 100; point.x = point.y = 0; point = point.matrixTransform(svg.getScreenCTM()); _svgScrollOffset = (e1 - point.y < 100.1) ? 0 : e1 - point.y - 150; div.removeChild(svg); parent.removeChild(div); // -- end _svgScrollOffset calculation. parent.appendChild(svg); matrix = svg.getScreenCTM(); e1 = matrix.e; style.border = "50px solid red"; matrix = svg.getScreenCTM(); if (e1 === 0 && matrix.e === 0 && matrix.f === 0 && matrix.a === 1) { //Opera has a bunch of bugs - it doesn't adjust the x/y of the matrix, nor does it scale when box-sizing is border-box but it does so elsewhere; to get the correct behavior we set _svgBorderScales to true. _svgBorderFactor = 1; _svgBorderScales = true; } else { _svgBorderFactor = (e1 !== matrix.e) ? 1 : 0; _svgBorderScales = (matrix.a !== 1); } parent.removeChild(svg); }, _supports3D = (_checkPrefix(_tempDiv, "perspective") !== ""), // start matrix and point conversion methods... _transformOriginProp = _checkPrefix(_tempDiv, "transformOrigin").replace(/^ms/g, "Ms").replace(/([A-Z])/g, "-$1").toLowerCase(), _transformProp = _checkPrefix(_tempDiv, "transform"), _transformPropCSS = _transformProp.replace(/^ms/g, "Ms").replace(/([A-Z])/g, "-$1").toLowerCase(), _point1 = {}, //we reuse _point1 and _point2 objects inside matrix and point conversion methods to conserve memory and minimize garbage collection tasks. _point2 = {}, _SVGElement = window.SVGElement, _isSVG = function(e) { return !!(_SVGElement && typeof(e.getBBox) === "function" && e.getCTM && (!e.parentNode || (e.parentNode.getBBox && e.parentNode.getCTM))); }, _isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9. _tempTransforms = [], _tempElements = [], _getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29 and Android), so we have to do some work to manufacture those values. You can pass any SVG element and it'll spit back an object with offsetTop, offsetLeft, offsetParent, scaleX, and scaleY properties. We need the scaleX and scaleY to handle the way SVG can resize itself based on the container. if (!e.getBoundingClientRect || !e.parentNode || !_transformProp) { return {offsetTop:0, offsetLeft:0, scaleX:1, scaleY:1, offsetParent:_docElement}; } if (Draggable.cacheSVGData !== false && e._dCache && e._dCache.lastUpdate === TweenLite.ticker.frame) { //performance optimization. Assume that if the offsets are requested again on the same tick, we can just feed back the values we already calculated (no need to keep recalculating until another tick elapses). return e._dCache; } var curElement = e, cache = _cache(e), eRect, parentRect, offsetParent, cs, m, i, point1, point2, borderWidth, borderHeight, width, height; cache.lastUpdate = TweenLite.ticker.frame; if (e.getBBox && !cache.isSVGRoot) { //if it's a nested/child SVG element, we must find the parent SVG canvas and measure the offset from there. curElement = e.parentNode; eRect = e.getBBox(); while (curElement && (curElement.nodeName + "").toLowerCase() !== "svg") { curElement = curElement.parentNode; } cs = _getSVGOffsets(curElement); cache.offsetTop = eRect.y * cs.scaleY; cache.offsetLeft = eRect.x * cs.scaleX; cache.scaleX = cs.scaleX; cache.scaleY = cs.scaleY; cache.offsetParent = curElement || _docElement; return cache; } //only root SVG elements continue here... offsetParent = cache.offsetParent; if (offsetParent === _doc.body) { offsetParent = _docElement; //avoids problems with margins/padding on the body } //walk up the ancestors and record any non-identity transforms (and reset them to "none") until we reach the offsetParent. We must do this so that the getBoundingClientRect() is accurate for measuring the offsetTop/offsetLeft. We'll revert the values later... _tempElements.length = _tempTransforms.length = 0; while (curElement) { m = _getStyle(curElement, _transformProp, true); if (m !== "matrix(1, 0, 0, 1, 0, 0)" && m !== "none" && m !== "translate3d(0px, 0px, 0px)") { _tempElements.push(curElement); _tempTransforms.push(curElement.style[_transformProp]); curElement.style[_transformProp] = "none"; } if (curElement === offsetParent) { break; } curElement = curElement.parentNode; } parentRect = offsetParent.getBoundingClientRect(); m = e.getScreenCTM(); point2 = e.createSVGPoint(); point1 = point2.matrixTransform(m); point2.x = point2.y = 10; point2 = point2.matrixTransform(m); cache.scaleX = (point2.x - point1.x) / 10; cache.scaleY = (point2.y - point1.y) / 10; if (_svgBorderFactor === undefined) { _setEnvironmentVariables(); } if (cache.borderBox && !_svgBorderScales && e.getAttribute("width")) { //some browsers (like Safari) don't properly scale the matrix to accommodate the border when box-sizing is border-box, so we must calculate it here... cs = _getComputedStyle(e) || {}; borderWidth = (parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth)) || 0; borderHeight = (parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth)) || 0; width = parseFloat(cs.width) || 0; height = parseFloat(cs.height) || 0; cache.scaleX *= (width - borderWidth) / width; cache.scaleY *= (height - borderHeight) / height; } if (_svgScrollOffset) { //some browsers (like Chrome for Android) have bugs in the way getScreenCTM() is reported (it doesn't factor in scroll position), so we must revert to a more expensive technique for calculating offsetTop/Left. eRect = e.getBoundingClientRect(); cache.offsetLeft = eRect.left - parentRect.left; cache.offsetTop = eRect.top - parentRect.top; } else { cache.offsetLeft = point1.x - parentRect.left; cache.offsetTop = point1.y - parentRect.top; } cache.offsetParent = offsetParent; i = _tempElements.length; while (--i > -1) { _tempElements[i].style[_transformProp] = _tempTransforms[i]; } return cache; }, _getOffsetTransformOrigin = function(e, decoratee) { //returns the x/y position of the transformOrigin of the element, in its own local coordinate system (pixels), offset from the top left corner. decoratee = decoratee || {}; if (!e || e === _docElement || !e.parentNode || e === window) { return {x:0, y:0}; } var cs = _getComputedStyle(e), v = (_transformOriginProp && cs) ? cs.getPropertyValue(_transformOriginProp) : "50% 50%", a = v.split(" "), x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0], y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1]; if (y === "center" || y == null) { y = "50%"; } if (x === "center" || isNaN(parseFloat(x))) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative. x = "50%"; } if (e.getBBox && _isSVG(e)) { //SVG elements must be handled in a special way because their origins are calculated from the top left. if (!e._gsTransform) { TweenLite.set(e, {x:"+=0", overwrite:false}); //forces creation of the _gsTransform where we store all the transform components including xOrigin and yOrigin for SVG elements, as of GSAP 1.15.0 which also takes care of calculating the origin from the upper left corner of the SVG canvas. if (e._gsTransform.xOrigin === undefined) { console.log("Draggable requires at least GSAP 1.17.0"); } } v = e.getBBox(); decoratee.x = (e._gsTransform.xOrigin - v.x); decoratee.y = (e._gsTransform.yOrigin - v.y); } else { if (e.getBBox && (x + y).indexOf("%") !== -1) { //Firefox doesn't report offsetWidth/height on <svg> elements. e = e.getBBox(); e = {offsetWidth: e.width, offsetHeight: e.height}; } decoratee.x = ((x.indexOf("%") !== -1) ? e.offsetWidth * parseFloat(x) / 100 : parseFloat(x)); decoratee.y = ((y.indexOf("%") !== -1) ? e.offsetHeight * parseFloat(y) / 100 : parseFloat(y)); } return decoratee; }, _cache = function(e) { //computes some important values and stores them in a _dCache object attached to the element itself so that we can optimize performance if (Draggable.cacheSVGData !== false && e._dCache && e._dCache.lastUpdate === TweenLite.ticker.frame) { //performance optimization. Assume that if the offsets are requested again on the same tick, we can just feed back the values we already calculated (no need to keep recalculating until another tick elapses). return e._dCache; } var cache = e._dCache = e._dCache || {}, cs = _getComputedStyle(e), isSVG = (e.getBBox && _isSVG(e)), isSVGRoot = ((e.nodeName + "").toLowerCase() === "svg"), curSVG; cache.isSVG = isSVG; cache.isSVGRoot = isSVGRoot; cache.borderBox = (cs.boxSizing === "border-box"); cache.computedStyle = cs; if (isSVGRoot) { //some browsers don't report parentNode on SVG elements. curSVG = e.parentNode || _docElement; curSVG.insertBefore(_tempDiv, e); cache.offsetParent = _tempDiv.offsetParent || _docElement; //in some cases, Firefox still reports offsetParent as null. curSVG.removeChild(_tempDiv); } else if (isSVG) { curSVG = e.parentNode; while (curSVG && (curSVG.nodeName + "").toLowerCase() !== "svg") { //offsetParent is always the SVG canvas for SVG elements. curSVG = curSVG.parentNode; } cache.offsetParent = curSVG; } else { cache.offsetParent = e.offsetParent; } return cache; }, _getOffset2DMatrix = function(e, offsetOrigin, parentOffsetOrigin, zeroOrigin) { if (e === window || !e || !e.style || !e.parentNode) { return [1,0,0,1,0,0]; } var cache = e._dCache || _cache(e), parent = e.parentNode, parentCache = parent._dCache || _cache(parent), cs = cache.computedStyle, parentOffsetParent = cache.isSVG ? parentCache.offsetParent : parent.offsetParent, m, isRoot, offsets, rect, t, sx, sy, offsetX, offsetY, parentRect, borderTop, borderLeft, borderTranslateX, borderTranslateY; m = (cache.isSVG && (e.style[_transformProp] + "").indexOf("matrix") !== -1) ? e.style[_transformProp] : cs ? cs.getPropertyValue(_transformPropCSS) : e.currentStyle ? e.currentStyle[_transformProp] : "1,0,0,1,0,0"; //some browsers (like Chrome 40) don't correctly report transforms that are applied inline on an SVG element (they don't get included in the computed style), so we double-check here and accept matrix values if (e.getBBox && (e.getAttribute("transform") + "").indexOf("matrix") !== -1) { //SVG can store transform data in its "transform" attribute instead of the CSS, so look for that here (only accept matrix()). m = e.getAttribute("transform"); } m = (m + "").match(/(?:\-|\.|\b)(\d|\.|e\-)+/g) || [1,0,0,1,0,0]; if (m.length > 6) { m = [m[0], m[1], m[4], m[5], m[12], m[13]]; } if (zeroOrigin) { m[4] = m[5] = 0; } else if (cache.isSVG && (t = e._gsTransform) && (t.xOrigin || t.yOrigin)) { //SVGs handle origin very differently. Factor in GSAP's handling of origin values here: m[0] = parseFloat(m[0]); m[1] = parseFloat(m[1]); m[2] = parseFloat(m[2]); m[3] = parseFloat(m[3]); m[4] = parseFloat(m[4]) - (t.xOrigin - (t.xOrigin * m[0] + t.yOrigin * m[2])); m[5] = parseFloat(m[5]) - (t.yOrigin - (t.xOrigin * m[1] + t.yOrigin * m[3])); } if (offsetOrigin) { if (_svgBorderFactor === undefined) { _setEnvironmentVariables(); } offsets = (cache.isSVG || cache.isSVGRoot) ? _getSVGOffsets(e) : e; if (cache.isSVG) { //don't just rely on "instanceof _SVGElement" because if the SVG is embedded via an object tag, it won't work (SVGElement is mapped to a different object)) rect = e.getBBox(); parentRect = (parentCache.isSVGRoot) ? {x:0, y:0} : parent.getBBox(); offsets = {offsetLeft:rect.x - parentRect.x, offsetTop:rect.y - parentRect.y, offsetParent:cache.offsetParent}; } else if (cache.isSVGRoot) { borderTop = parseInt(cs.borderTopWidth, 10) || 0; borderLeft = parseInt(cs.borderLeftWidth, 10) || 0; borderTranslateX = ((m[0] - _svgBorderFactor) * borderLeft + m[2] * borderTop); borderTranslateY = (m[1] * borderLeft + (m[3] - _svgBorderFactor) * borderTop); sx = offsetOrigin.x; sy = offsetOrigin.y; offsetX = (sx - (sx * m[0] + sy * m[2])); //accommodate the SVG root's transforms when the origin isn't in the top left. offsetY = (sy - (sx * m[1] + sy * m[3])); m[4] = parseFloat(m[4]) + offsetX; m[5] = parseFloat(m[5]) + offsetY; offsetOrigin.x -= offsetX; offsetOrigin.y -= offsetY; sx = offsets.scaleX; sy = offsets.scaleY; offsetOrigin.x *= sx; offsetOrigin.y *= sy; m[0] *= sx; m[1] *= sy; m[2] *= sx; m[3] *= sy; if (!_isIE10orBelow) { offsetOrigin.x += borderTranslateX; offsetOrigin.y += borderTranslateY; } } else if (!_hasBorderBug && e.offsetParent) { offsetOrigin.x += parseInt(_getStyle(e.offsetParent, "borderLeftWidth"), 10) || 0; offsetOrigin.y += parseInt(_getStyle(e.offsetParent, "borderTopWidth"), 10) || 0; } isRoot = (parent === _docElement || parent === _doc.body); m[4] = Number(m[4]) + offsetOrigin.x + (offsets.offsetLeft || 0) - parentOffsetOrigin.x - (isRoot ? 0 : parent.scrollLeft || 0); m[5] = Number(m[5]) + offsetOrigin.y + (offsets.offsetTop || 0) - parentOffsetOrigin.y - (isRoot ? 0 : parent.scrollTop || 0); if (parent && _getStyle(e, "position", cs) === "fixed") { //fixed position elements should factor in the scroll position of the document. m[4] += _getDocScrollLeft(); m[5] += _getDocScrollTop(); } if (parent && parent !== _docElement && parentOffsetParent === offsets.offsetParent && !parentCache.isSVG && (!_hasReparentBug || _getOffset2DMatrix(parent).join("") === "100100")) { offsets = (parentCache.isSVGRoot) ? _getSVGOffsets(parent) : parent; m[4] -= offsets.offsetLeft || 0; m[5] -= offsets.offsetTop || 0; if (!_hasBorderBug && parentCache.offsetParent && !cache.isSVG && !cache.isSVGRoot) { m[4] -= parseInt(_getStyle(parentCache.offsetParent, "borderLeftWidth"), 10) || 0; m[5] -= parseInt(_getStyle(parentCache.offsetParent, "borderTopWidth"), 10) || 0; } } } return m; }, _getConcatenatedMatrix = function(e, invert) { if (!e || e === window || !e.parentNode) { return [1,0,0,1,0,0]; } //note: we keep reusing _point1 and _point2 in order to minimize memory usage and garbage collection chores. var originOffset = _getOffsetTransformOrigin(e, _point1), parentOriginOffset = _getOffsetTransformOrigin(e.parentNode, _point2), m = _getOffset2DMatrix(e, originOffset, parentOriginOffset), a, b, c, d, tx, ty, m2, determinant; while ((e = e.parentNode) && e.parentNode && e !== _docElement) { originOffset = parentOriginOffset; parentOriginOffset = _getOffsetTransformOrigin(e.parentNode, (originOffset === _point1) ? _point2 : _point1); m2 = _getOffset2DMatrix(e, originOffset, parentOriginOffset); a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; m[0] = a * m2[0] + b * m2[2]; m[1] = a * m2[1] + b * m2[3]; m[2] = c * m2[0] + d * m2[2]; m[3] = c * m2[1] + d * m2[3]; m[4] = tx * m2[0] + ty * m2[2] + m2[4]; m[5] = tx * m2[1] + ty * m2[3] + m2[5]; } if (invert) { a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; determinant = (a * d - b * c); m[0] = d / determinant; m[1] = -b / determinant; m[2] = -c / determinant; m[3] = a / determinant; m[4] = (c * ty - d * tx) / determinant; m[5] = -(a * ty - b * tx) / determinant; } return m; }, _localToGlobal = function(e, p, fromTopLeft, decoratee, zeroOrigin) { e = _unwrapElement(e); var m = _getConcatenatedMatrix(e, false, zeroOrigin), x = p.x, y = p.y; if (fromTopLeft) { _getOffsetTransformOrigin(e, p); x -= p.x; y -= p.y; } decoratee = (decoratee === true) ? p : decoratee || {}; decoratee.x = x * m[0] + y * m[2] + m[4]; decoratee.y = x * m[1] + y * m[3] + m[5]; return decoratee; }, _localizePoint = function(p, localToGlobal, globalToLocal) { var x = p.x * localToGlobal[0] + p.y * localToGlobal[2] + localToGlobal[4], y = p.x * localToGlobal[1] + p.y * localToGlobal[3] + localToGlobal[5]; p.x = x * globalToLocal[0] + y * globalToLocal[2] + globalToLocal[4]; p.y = x * globalToLocal[1] + y * globalToLocal[3] + globalToLocal[5]; return p; }, _getElementBounds = function(e, context, fromTopLeft) { if (!(e = _unwrapElement(e))) { return null; } context = _unwrapElement(context); var isSVG = (e.getBBox && _isSVG(e)), origin, left, right, top, bottom, mLocalToGlobal, mGlobalToLocal, p1, p2, p3, p4, bbox, width, height, cache, borderLeft, borderTop, viewBox, viewBoxX, viewBoxY, computedDimensions, cs; if (e === window) { top = _getDocScrollTop(); left = _getDocScrollLeft(); right = left + (_docElement.clientWidth || e.innerWidth || _doc.body.clientWidth || 0); bottom = top + (((e.innerHeight || 0) - 20 < _docElement.clientHeight) ? _docElement.clientHeight : e.innerHeight || _doc.body.clientHeight || 0); //some browsers (like Firefox) ignore absolutely positioned elements, and collapse the height of the documentElement, so it could be 8px, for example, if you have just an absolutely positioned div. In that case, we use the innerHeight to resolve this. } else if (context === undefined || context === window) { return e.getBoundingClientRect(); } else { origin = _getOffsetTransformOrigin(e); left = -origin.x; top = -origin.y; if (isSVG) { bbox = e.getBBox(); width = bbox.width; height = bbox.height; } else if ((e.nodeName + "").toLowerCase() !== "svg" && e.offsetWidth) { //Chrome dropped support for "offsetWidth" on SVG elements width = e.offsetWidth; height = e.offsetHeight; } else { computedDimensions = _getComputedStyle(e); width = parseFloat(computedDimensions.width); height = parseFloat(computedDimensions.height); } right = left + width; bottom = top + height; if (e.nodeName.toLowerCase() === "svg" && !_isOldIE) { //root SVG elements are a special beast because they have 2 types of scaling - transforms on themselves as well as the stretching of the SVG canvas itself based on the outer size and the viewBox. If, for example, the SVG's viewbox is "0 0 100 100" but the CSS is set to width:200px; height:200px, that'd make it appear at 2x scale even though the element itself has no CSS transforms but the offsetWidth/offsetHeight are based on that css, not the viewBox so we need to adjust them accordingly. cache = _getSVGOffsets(e); cs = cache.computedStyle || {}; viewBox = (e.getAttribute("viewBox") || "0 0").split(" "); viewBoxX = parseFloat(viewBox[0]); viewBoxY = parseFloat(viewBox[1]); borderLeft = parseFloat(cs.borderLeftWidth) || 0; borderTop = parseFloat(cs.borderTopWidth) || 0; right -= width - ((width - borderLeft) / cache.scaleX) - viewBoxX; bottom -= height - ((height - borderTop) / cache.scaleY) - viewBoxY; left -= borderLeft / cache.scaleX - viewBoxX; top -= borderTop / cache.scaleY - viewBoxY; if (computedDimensions) { //when we had to use computed styles, factor in the border now. right += (parseFloat(cs.borderRightWidth) + borderLeft) / cache.scaleX; bottom += (borderTop + parseFloat(cs.borderBottomWidth)) / cache.scaleY; } } } if (e === context) { return {left:left, top:top, width: right - left, height: bottom - top}; } mLocalToGlobal = _getConcatenatedMatrix(e); mGlobalToLocal = _getConcatenatedMatrix(context, true); p1 = _localizePoint({x:left, y:top}, mLocalToGlobal, mGlobalToLocal); p2 = _localizePoint({x:right, y:top}, mLocalToGlobal, mGlobalToLocal); p3 = _localizePoint({x:right, y:bottom}, mLocalToGlobal, mGlobalToLocal); p4 = _localizePoint({x:left, y:bottom}, mLocalToGlobal, mGlobalToLocal); left = Math.min(p1.x, p2.x, p3.x, p4.x); top = Math.min(p1.y, p2.y, p3.y, p4.y); _temp1.x = _temp1.y = 0; if (fromTopLeft) { _getOffsetTransformOrigin(context, _temp1); } return {left:left + _temp1.x, top:top + _temp1.y, width:Math.max(p1.x, p2.x, p3.x, p4.x) - left, height:Math.max(p1.y, p2.y, p3.y, p4.y) - top}; }, // end matrix and point conversion methods _isArrayLike = function(e) { return (e && e.length && e[0] && ((e[0].nodeType && e[0].style && !e.nodeType) || (e[0].length && e[0][0]))) ? true : false; //could be an array of jQuery objects too, so accommodate that. }, _flattenArray = function(a) { var result = [], l = a.length, i, e, j; for (i = 0; i < l; i++) { e = a[i]; if (_isArrayLike(e)) { j = e.length; for (j = 0; j < e.length; j++) { result.push(e[j]); } } else if (e && e.length !== 0) { result.push(e); } } return result; }, _isTouchDevice = (("ontouchstart" in _docElement) && ("orientation" in window)), _touchEventLookup = (function(types) { //we create an object that makes it easy to translate touch event types into their "pointer" counterparts if we're in a browser that uses those instead. Like IE10 uses "MSPointerDown" instead of "touchstart", for example. var standard = types.split(","), converted = ((_tempDiv.onpointerdown !== undefined) ? "pointerdown,pointermove,pointerup,pointercancel" : (_tempDiv.onmspointerdown !== undefined) ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : types).split(","), obj = {}, i = 8; while (--i > -1) { obj[standard[i]] = converted[i]; obj[converted[i]] = standard[i]; } return obj; }("touchstart,touchmove,touchend,touchcancel")), _addListener = function(element, type, func, capture) { if (element.addEventListener) { element.addEventListener(_touchEventLookup[type] || type, func, capture); } else if (element.attachEvent) { element.attachEvent("on" + type, func); } }, _removeListener = function(element, type, func) { if (element.removeEventListener) { element.removeEventListener(_touchEventLookup[type] || type, func); } else if (element.detachEvent) { element.detachEvent("on" + type, func); } }, _hasTouchID = function(list, ID) { var i = list.length; while (--i > -1) { if (list[i].identifier === ID) { return true; } } return false; }, _onMultiTouchDocumentEnd = function(e) { _isMultiTouching = (e.touches && _dragCount < e.touches.length); _removeListener(e.target, "touchend", _onMultiTouchDocumentEnd); }, _onMultiTouchDocument = function(e) { _isMultiTouching = (e.touches && _dragCount < e.touches.length); _addListener(e.target, "touchend", _onMultiTouchDocumentEnd); }, _parseThrowProps = function(draggable, snap, max, min, factor, forceZeroVelocity) { var vars = {}, a, i, l; if (snap) { if (factor !== 1 && snap instanceof Array) { //some data must be altered to make sense, like if the user passes in an array of rotational values in degrees, we must convert it to radians. Or for scrollLeft and scrollTop, we invert the values. vars.end = a = []; l = snap.length; if (typeof(snap[0]) === "object") { //if the array is populated with objects, like points ({x:100, y:200}), make copies before multiplying by the factor, otherwise we'll mess up the originals and the user may reuse it elsewhere. for (i = 0; i < l; i++) { a[i] = _copy(snap[i], factor); } } else { for (i = 0; i < l; i++) { a[i] = snap[i] * factor; } } max += 1.1; //allow 1.1 pixels of wiggle room when snapping in order to work around some browser inconsistencies in the way bounds are reported which can make them roughly a pixel off. For example, if "snap:[-$('#menu').width(), 0]" was defined and #menu had a wrapper that was used as the bounds, some browsers would be one pixel off, making the minimum -752 for example when snap was [-753,0], thus instead of snapping to -753, it would snap to 0 since -753 was below the minimum. min -= 1.1; } else if (typeof(snap) === "function") { vars.end = function(value) { var result = snap.call(draggable, value), copy, p; if (factor !== 1 && typeof(result) === "object") { copy = {}; for (p in result) { copy[p] = result[p] * factor; } result = copy; } return result; //we need to ensure that we can scope the function call to the Draggable instance itself so that users can access important values like maxX, minX, maxY, minY, x, and y from within that function. }; } else { vars.end = snap; } } if (max || max === 0) { vars.max = max; } if (min || min === 0) { vars.min = min; } if (forceZeroVelocity) { vars.velocity = 0; } return vars; }, _isClickable = function(e) { //sometimes it's convenient to mark an element as clickable by adding a data-clickable="true" attribute (in which case we won't preventDefault() the mouse/touch event). This method checks if the element is an <a>, <input>, or <button> or has an onclick or has the data-clickable or contentEditable attribute set to true (or any of its parent elements). var data; return (!e || !e.getAttribute || e.nodeName === "BODY") ? false : ((data = e.getAttribute("data-clickable")) === "true" || (data !== "false" && (e.onclick || _clickableTagExp.test(e.nodeName + "") || e.getAttribute("contentEditable") === "true"))) ? true : _isClickable(e.parentNode); }, _setSelectable = function(elements, selectable) { var i = elements.length, e; while (--i > -1) { e = elements[i]; e.ondragstart = e.onselectstart = selectable ? null : _emptyFunc; _setStyle(e, "userSelect", (selectable ? "text" : "none")); } }, _addPaddingBR, _addPaddingLeft = (function() { //this function is in charge of analyzing browser behavior related to padding. It sets the _addPaddingBR to true if the browser doesn't normally factor in the bottom or right padding on the element inside the scrolling area, and it sets _addPaddingLeft to true if it's a browser that requires the extra offset (offsetLeft) to be added to the paddingRight (like Opera). var div = _doc.createElement("div"), child = _doc.createElement("div"), childStyle = child.style, parent = _doc.body || _tempDiv, val; childStyle.display = "inline-block"; childStyle.position = "relative"; div.style.cssText = child.innerHTML = "width:90px; height:40px; padding:10px; overflow:auto; visibility: hidden"; div.appendChild(child); parent.appendChild(div); _addPaddingBR = (child.offsetHeight + 18 > div.scrollHeight); //div.scrollHeight should be child.offsetHeight + 20 because of the 10px of padding on each side, but some browsers ignore one side. We allow a 2px margin of error. childStyle.width = "100%"; if (!_transformProp) { childStyle.paddingRight = "500px"; val = div.scrollLeft = div.scrollWidth - div.clientWidth; childStyle.left = "-90px"; val = (val !== div.scrollLeft); } parent.removeChild(div); return val; }()), //The ScrollProxy class wraps an element's contents into another div (we call it "content") that we either add padding when necessary or apply a translate3d() transform in order to overscroll (scroll past the boundaries). This allows us to simply set the scrollTop/scrollLeft (or top/left for easier reverse-axis orientation, which is what we do in Draggable) and it'll do all the work for us. For example, if we tried setting scrollTop to -100 on a normal DOM element, it wouldn't work - it'd look the same as setting it to 0, but if we set scrollTop of a ScrollProxy to -100, it'll give the correct appearance by either setting paddingTop of the wrapper to 100 or applying a 100-pixel translateY. ScrollProxy = function(element, vars) { element = _unwrapElement(element); vars = vars || {}; var content = _doc.createElement("div"), style = content.style, node = element.firstChild, offsetTop = 0, offsetLeft = 0, prevTop = element.scrollTop, prevLeft = element.scrollLeft, scrollWidth = element.scrollWidth, scrollHeight = element.scrollHeight, extraPadRight = 0, maxLeft = 0, maxTop = 0, elementWidth, elementHeight, contentHeight, nextNode, transformStart, transformEnd; if (_supports3D && vars.force3D !== false) { transformStart = "translate3d("; transformEnd = "px,0px)"; } else if (_transformProp) { transformStart = "translate("; transformEnd = "px)"; } this.scrollTop = function(value, force) { if (!arguments.length) { return -this.top(); } this.top(-value, force); }; this.scrollLeft = function(value, force) { if (!arguments.length) { return -this.left(); } this.left(-value, force); }; this.left = function(value, force) { if (!arguments.length) { return -(element.scrollLeft + offsetLeft); } var dif = element.scrollLeft - prevLeft, oldOffset = offsetLeft; if ((dif > 2 || dif < -2) && !force) { //if the user interacts with the scrollbar (or something else scrolls it, like the mouse wheel), we should kill any tweens of the ScrollProxy. prevLeft = element.scrollLeft; TweenLite.killTweensOf(this, true, {left:1, scrollLeft:1}); this.left(-prevLeft); if (vars.onKill) { vars.onKill(); } return; } value = -value; //invert because scrolling works in the opposite direction if (value < 0) { offsetLeft = (value - 0.5) | 0; value = 0; } else if (value > maxLeft) { offsetLeft = (value - maxLeft) | 0; value = maxLeft; } else { offsetLeft = 0; } if (offsetLeft || oldOffset) { if (transformStart) { if (!this._suspendTransforms) { style[_transformProp] = transformStart + -offsetLeft + "px," + -offsetTop + transformEnd; } } else { style.left = -offsetLeft + "px"; } if (_addPaddingLeft && offsetLeft + extraPadRight >= 0) { style.paddingRight = offsetLeft + extraPadRight + "px"; } } element.scrollLeft = value | 0; prevLeft = element.scrollLeft; //don't merge this with the line above because some browsers adjsut the scrollLeft after it's set, so in order to be 100% accurate in tracking it, we need to ask the browser to report it. }; this.top = function(value, force) { if (!arguments.length) { return -(element.scrollTop + offsetTop); } var dif = element.scrollTop - prevTop, oldOffset = offsetTop; if ((dif > 2 || dif < -2) && !force) { //if the user interacts with the scrollbar (or something else scrolls it, like the mouse wheel), we should kill any tweens of the ScrollProxy. prevTop = element.scrollTop; TweenLite.killTweensOf(this, true, {top:1, scrollTop:1}); this.top(-prevTop); if (vars.onKill) { vars.onKill(); } return; } value = -value; //invert because scrolling works in the opposite direction if (value < 0) { offsetTop = (value - 0.5) | 0; value = 0; } else if (value > maxTop) { offsetTop = (value - maxTop) | 0; value = maxTop; } else { offsetTop = 0; } if (offsetTop || oldOffset) { if (transformStart) { if (!this._suspendTransforms) { style[_transformProp] = transformStart + -offsetLeft + "px," + -offsetTop + transformEnd; } } else { style.top = -offsetTop + "px"; } } element.scrollTop = value | 0; prevTop = element.scrollTop; }; this.maxScrollTop = function() { return maxTop; }; this.maxScrollLeft = function() { return maxLeft; }; this.disable = function() { node = content.firstChild; while (node) { nextNode = node.nextSibling; element.appendChild(node); node = nextNode; } if (element === content.parentNode) { //in case disable() is called when it's already disabled. element.removeChild(content); } }; this.enable = function() { node = element.firstChild; if (node === content) { return; } while (node) { nextNode = node.nextSibling; content.appendChild(node); node = nextNode; } element.appendChild(content); this.calibrate(); }; this.calibrate = function(force) { var widthMatches = (element.clientWidth === elementWidth), x, y; prevTop = element.scrollTop; prevLeft = element.scrollLeft; if (widthMatches && element.clientHeight === elementHeight && content.offsetHeight === contentHeight && scrollWidth === element.scrollWidth && scrollHeight === element.scrollHeight && !force) { return; //no need to recalculate things if the width and height haven't changed. } if (offsetTop || offsetLeft) { x = this.left(); y = this.top(); this.left(-element.scrollLeft); this.top(-element.scrollTop); } //first, we need to remove any width constraints to see how the content naturally flows so that we can see if it's wider than the containing element. If so, we've got to record the amount of overage so that we can apply that as padding in order for browsers to correctly handle things. Then we switch back to a width of 100% (without that, some browsers don't flow the content correctly) if (!widthMatches || force) { style.display = "block"; style.width = "auto"; style.paddingRight = "0px"; extraPadRight = Math.max(0, element.scrollWidth - element.clientWidth); //if the content is wider than the container, we need to add the paddingLeft and paddingRight in order for things to behave correctly. if (extraPadRight) { extraPadRight += _getStyle(element, "paddingLeft") + (_addPaddingBR ? _getStyle(element, "paddingRight") : 0); } } style.display = "inline-block"; style.position = "relative"; style.overflow = "visible"; style.verticalAlign = "top"; style.width = "100%"; style.paddingRight = extraPadRight + "px"; //some browsers neglect to factor in the bottom padding when calculating the scrollHeight, so we need to add that padding to the content when that happens. Allow a 2px margin for error if (_addPaddingBR) { style.paddingBottom = _getStyle(element, "paddingBottom", true); } if (_isOldIE) { style.zoom = "1"; } elementWidth = element.clientWidth; elementHeight = element.clientHeight; scrollWidth = element.scrollWidth; scrollHeight = element.scrollHeight; maxLeft = element.scrollWidth - elementWidth; maxTop = element.scrollHeight - elementHeight; contentHeight = content.offsetHeight; style.display = "block"; if (x || y) { this.left(x); this.top(y); } }; this.content = content; this.element = element; this._suspendTransforms = false; this.enable(); }, Draggable = function(target, vars) { EventDispatcher.call(this, target); target = _unwrapElement(target); //in case the target is a selector object or selector text if (!ThrowPropsPlugin) { ThrowPropsPlugin = _globals.com.greensock.plugins.ThrowPropsPlugin; } this.vars = vars = _copy(vars || {}); this.target = target; this.x = this.y = this.rotation = 0; this.dragResistance = parseFloat(vars.dragResistance) || 0; this.edgeResistance = isNaN(vars.edgeResistance) ? 1 : parseFloat(vars.edgeResistance) || 0; this.lockAxis = vars.lockAxis; this.autoScroll = vars.autoScroll || 0; this.lockedAxis = null; this.allowEventDefault = !!vars.allowEventDefault; var type = (vars.type || (_isOldIE ? "top,left" : "x,y")).toLowerCase(), xyMode = (type.indexOf("x") !== -1 || type.indexOf("y") !== -1), rotationMode = (type.indexOf("rotation") !== -1), xProp = rotationMode ? "rotation" : xyMode ? "x" : "left", yProp = xyMode ? "y" : "top", allowX = (type.indexOf("x") !== -1 || type.indexOf("left") !== -1 || type === "scroll"), allowY = (type.indexOf("y") !== -1 || type.indexOf("top") !== -1 || type === "scroll"), minimumMovement = vars.minimumMovement || 2, self = this, triggers = _slice(vars.trigger || vars.handle || target), killProps = {}, dragEndTime = 0, checkAutoScrollBounds = false, isClickable = vars.clickableTest || _isClickable, clickTime = 0, enabled, scrollProxy, startPointerX, startPointerY, startElementX, startElementY, hasBounds, hasDragCallback, maxX, minX, maxY, minY, tempVars, cssVars, touch, touchID, rotationOrigin, dirty, old, snapX, snapY, snapXY, isClicking, touchEventTarget, matrix, interrupted, startScrollTop, startScrollLeft, applyObj, allowNativeTouchScrolling, touchDragAxis, isDispatching, clickDispatch, trustedClickDispatch, //this method gets called on every tick of TweenLite.ticker which allows us to synchronize the renders to the core engine (which is typically synchronized with the display refresh via requestAnimationFrame). This is an optimization - it's better than applying the values inside the "mousemove" or "touchmove" event handler which may get called many times inbetween refreshes. render = function(suppressEvents) { if (self.autoScroll && self.isDragging && (checkAutoScrollBounds || dirty)) { var e = target, autoScrollFactor = self.autoScroll * 15, //multiplying by 15 just gives us a better "feel" speed-wise. parent, isRoot, rect, pointerX, pointerY, changeX, changeY, gap; checkAutoScrollBounds = false; _windowProxy.scrollTop = ((window.pageYOffset != null) ? window.pageYOffset : (_docElement.scrollTop != null) ? _docElement.scrollTop : _doc.body.scrollTop); _windowProxy.scrollLeft = ((window.pageXOffset != null) ? window.pageXOffset : (_docElement.scrollLeft != null) ? _docElement.scrollLeft : _doc.body.scrollLeft); pointerX = self.pointerX - _windowProxy.scrollLeft; pointerY = self.pointerY - _windowProxy.scrollTop; while (e && !isRoot) { //walk up the chain and sense wherever the pointer is within 40px of an edge that's scrollable. isRoot = _isRoot(e.parentNode); parent = isRoot ? _windowProxy : e.parentNode; rect = isRoot ? {bottom:Math.max(_docElement.clientHeight, window.innerHeight || 0), right: Math.max(_docElement.clientWidth, window.innerWidth || 0), left:0, top:0} : parent.getBoundingClientRect(); changeX = changeY = 0; if (allowY) { gap = parent._gsMaxScrollY - parent.scrollTop; if (gap < 0) { changeY = gap; } else if (pointerY > rect.bottom - 40 && gap) { checkAutoScrollBounds = true; changeY = Math.min(gap, (autoScrollFactor * (1 - Math.max(0, (rect.bottom - pointerY)) / 40)) | 0); } else if (pointerY < rect.top + 40 && parent.scrollTop) { checkAutoScrollBounds = true; changeY = -Math.min(parent.scrollTop, (autoScrollFactor * (1 - Math.max(0, (pointerY - rect.top)) / 40)) | 0); } if (changeY) { parent.scrollTop += changeY; } } if (allowX) { gap = parent._gsMaxScrollX - parent.scrollLeft; if (gap < 0) { changeX = gap; } else if (pointerX > rect.right - 40 && gap) { checkAutoScrollBounds = true; changeX = Math.min(gap, (autoScrollFactor * (1 - Math.max(0, (rect.right - pointerX)) / 40)) | 0); } else if (pointerX < rect.left + 40 && parent.scrollLeft) { checkAutoScrollBounds = true; changeX = -Math.min(parent.scrollLeft, (autoScrollFactor * (1 - Math.max(0, (pointerX - rect.left)) / 40)) | 0); } if (changeX) { parent.scrollLeft += changeX; } } if (isRoot && (changeX || changeY)) { window.scrollTo(parent.scrollLeft, parent.scrollTop); setPointerPosition(self.pointerX + changeX, self.pointerY + changeY); } e = parent; } } if (dirty) { var x = self.x, y = self.y, min = 0.000001; if (x < min && x > -min) { //browsers don't handle super small decimals well. x = 0; } if (y < min && y > -min) { y = 0; } if (rotationMode) { self.deltaX = x - applyObj.data.rotation; applyObj.data.rotation = self.rotation = x; applyObj.setRatio(1); //note: instead of doing TweenLite.set(), as a performance optimization we skip right to the method that renders the transforms inside CSSPlugin. For old versions of IE, though, we do a normal TweenLite.set() to leverage its ability to re-reroute to an IE-specific 2D renderer. } else { if (scrollProxy) { if (allowY) { self.deltaY = y - scrollProxy.top(); scrollProxy.top(y); } if (allowX) { self.deltaX = x - scrollProxy.left(); scrollProxy.left(x); } } else if (xyMode) { if (allowY) { self.deltaY = y - applyObj.data.y; applyObj.data.y = y; } if (allowX) { self.deltaX = x - applyObj.data.x; applyObj.data.x = x; } applyObj.setRatio(1); //note: instead of doing TweenLite.set(), as a performance optimization we skip right to the method that renders the transforms inside CSSPlugin. For old versions of IE, though, we do a normal TweenLite.set() to leverage its ability to re-reroute to an IE-specific 2D renderer. } else { if (allowY) { self.deltaY = y - parseFloat(target.style.top || 0); target.style.top = y + "px"; } if (allowX) { self.deltaY = x - parseFloat(target.style.left || 0); target.style.left = x + "px"; } } } if (hasDragCallback && !suppressEvents && !isDispatching) { isDispatching = true; //in case onDrag has an update() call (avoid endless loop) _dispatchEvent(self, "drag", "onDrag"); isDispatching = false; } } dirty = false; }, //copies the x/y from the element (whether that be transforms, top/left, or ScrollProxy's top/left) to the Draggable's x and y (and rotation if necessary) properties so that they reflect reality and it also (optionally) applies any snapping necessary. This is used by the ThrowPropsPlugin tween in an onUpdate to ensure things are synced and snapped. syncXY = function(skipOnUpdate, skipSnap) { var x = self.x, y = self.y, snappedValue; if (!target._gsTransform && (xyMode || rotationMode)) { //just in case the _gsTransform got wiped, like if the user called clearProps on the transform or something (very rare), doing an x tween forces a re-parsing of the transforms and population of the _gsTransform. TweenLite.set(target, {x:"+=0", overwrite:false}); } if (xyMode) { self.y = target._gsTransform.y; self.x = target._gsTransform.x; } else if (rotationMode) { self.x = self.rotation = target._gsTransform.rotation; } else if (scrollProxy) { self.y = scrollProxy.top(); self.x = scrollProxy.left(); } else { self.y = parseInt(target.style.top, 10) || 0; self.x = parseInt(target.style.left, 10) || 0; } if ((snapX || snapY || snapXY) && !skipSnap && (self.isDragging || self.isThrowing)) { if (snapXY) { _temp1.x = self.x; _temp1.y = self.y; snappedValue = snapXY(_temp1); if (snappedValue.x !== self.x) { self.x = snappedValue.x; dirty = true; } if (snappedValue.y !== self.y) { self.y = snappedValue.y; dirty = true; } } if (snapX) { snappedValue = snapX(self.x); if (snappedValue !== self.x) { self.x = snappedValue; if (rotationMode) { self.rotation = snappedValue; } dirty = true; } } if (snapY) { snappedValue = snapY(self.y); if (snappedValue !== self.y) { self.y = snappedValue; } dirty = true; } } if (dirty) { render(true); } if (!skipOnUpdate) { self.deltaX = self.x - x; self.deltaY = self.y - y; _dispatchEvent(self, "throwupdate", "onThrowUpdate"); } }, calculateBounds = function() { var bounds, targetBounds, snap, snapIsRaw; hasBounds = false; if (scrollProxy) { scrollProxy.calibrate(); self.minX = minX = -scrollProxy.maxScrollLeft(); self.minY = minY = -scrollProxy.maxScrollTop(); self.maxX = maxX = self.maxY = maxY = 0; hasBounds = true; } else if (!!vars.bounds) { bounds = _getBounds(vars.bounds, target.parentNode); //could be a selector/jQuery object or a DOM element or a generic object like {top:0, left:100, width:1000, height:800} or {minX:100, maxX:1100, minY:0, maxY:800} if (rotationMode) { self.minX = minX = bounds.left; self.maxX = maxX = bounds.left + bounds.width; self.minY = minY = self.maxY = maxY = 0; } else if (vars.bounds.maxX !== undefined || vars.bounds.maxY !== undefined) { bounds = vars.bounds; self.minX = minX = bounds.minX; self.minY = minY = bounds.minY; self.maxX = maxX = bounds.maxX; self.maxY = maxY = bounds.maxY; } else { targetBounds = _getBounds(target, target.parentNode); self.minX = minX = _getStyle(target, xProp) + bounds.left - targetBounds.left; self.minY = minY = _getStyle(target, yProp) + bounds.top - targetBounds.top; self.maxX = maxX = minX + (bounds.width - targetBounds.width); self.maxY = maxY = minY + (bounds.height - targetBounds.height); } if (minX > maxX) { self.minX = maxX; self.maxX = maxX = minX; minX = self.minX; } if (minY > maxY) { self.minY = maxY; self.maxY = maxY = minY; minY = self.minY; } if (rotationMode) { self.minRotation = minX; self.maxRotation = maxX; } hasBounds = true; } if (vars.liveSnap) { snap = (vars.liveSnap === true) ? (vars.snap || {}) : vars.liveSnap; snapIsRaw = (snap instanceof Array || typeof(snap) === "function"); if (rotationMode) { snapX = buildSnapFunc((snapIsRaw ? snap : snap.rotation), minX, maxX, 1); snapY = null; } else { if (snap.points) { snapXY = buildPointSnapFunc((snapIsRaw ? snap : snap.points), minX, maxX, minY, maxY, snap.radius, scrollProxy ? -1 : 1); } else { if (allowX) { snapX = buildSnapFunc((snapIsRaw ? snap : snap.x || snap.left || snap.scrollLeft), minX, maxX, scrollProxy ? -1 : 1); } if (allowY) { snapY = buildSnapFunc((snapIsRaw ? snap : snap.y || snap.top || snap.scrollTop), minY, maxY, scrollProxy ? -1 : 1); } } } } }, onThrowComplete = function() { self.isThrowing = false; _dispatchEvent(self, "throwcomplete", "onThrowComplete"); }, onThrowOverwrite = function() { self.isThrowing = false; }, animate = function(throwProps, forceZeroVelocity) { var snap, snapIsRaw, tween, overshootTolerance; if (throwProps && ThrowPropsPlugin) { if (throwProps === true) { snap = vars.snap || vars.liveSnap || {}; snapIsRaw = (snap instanceof Array || typeof(snap) === "function"); throwProps = {resistance:(vars.throwResistance || vars.resistance || 1000) / (rotationMode ? 10 : 1)}; if (rotationMode) { throwProps.rotation = _parseThrowProps(self, snapIsRaw ? snap : snap.rotation, maxX, minX, 1, forceZeroVelocity); } else { if (allowX) { throwProps[xProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.points || snap.x || snap.left || snap.scrollLeft, maxX, minX, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockedAxis === "x")); } if (allowY) { throwProps[yProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.points || snap.y || snap.top || snap.scrollTop, maxY, minY, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockedAxis === "y")); } if (snap.points || (snap instanceof Array && typeof(snap[0]) === "object")) { throwProps.linkedProps = xProp + "," + yProp; throwProps.radius = snap.radius; //note: we also disable liveSnapping while throwing if there's a "radius" defined, otherwise it looks weird to have the item thrown past a snapping point but live-snapping mid-tween. We do this by altering the onUpdateParams so that "skipSnap" parameter is true for syncXY. } } } self.isThrowing = true; overshootTolerance = (!isNaN(vars.overshootTolerance)) ? vars.overshootTolerance : (vars.edgeResistance === 1) ? 0 : (1 - self.edgeResistance) + 0.2; self.tween = tween = ThrowPropsPlugin.to(scrollProxy || target, {throwProps:throwProps, ease:(vars.ease || _globals.Power3.easeOut), onComplete:onThrowComplete, onOverwrite:onThrowOverwrite, onUpdate:(vars.fastMode ? _dispatchEvent : syncXY), onUpdateParams:(vars.fastMode ? [self, "onthrowupdate", "onThrowUpdate"] : (snap && snap.radius) ? [false, true] : _emptyArray)}, (isNaN(vars.maxDuration) ? 2 : vars.maxDuration), (!isNaN(vars.minDuration) ? vars.minDuration : (overshootTolerance === 0) ? 0 : 0.5), overshootTolerance); if (!vars.fastMode) { //to populate the end values, we just scrub the tween to the end, record the values, and then jump back to the beginning. if (scrollProxy) { scrollProxy._suspendTransforms = true; //Microsoft browsers have a bug that causes them to briefly render the position incorrectly (it flashes to the end state when we seek() the tween even though we jump right back to the current position, and this only seems to happen when we're affecting both top and left), so we set a _suspendTransforms flag to prevent it from actually applying the values in the ScrollProxy. } tween.render(tween.duration(), true, true); syncXY(true, true); self.endX = self.x; self.endY = self.y; if (rotationMode) { self.endRotation = self.x; } tween.play(0); syncXY(true, true); if (scrollProxy) { scrollProxy._suspendTransforms = false; } } } else if (hasBounds) { self.applyBounds(); } }, updateMatrix = function(shiftStart) { var start = matrix || [1,0,0,1,0,0], a, b, c, d, tx, ty, determinant, pointerX, pointerY; matrix = _getConcatenatedMatrix(target.parentNode, true); if (shiftStart && self.isPressed && start.join(",") !== matrix.join(",")) { //if the matrix changes WHILE the element is pressed, we must adjust the startPointerX and startPointerY accordingly, so we invert the original matrix and figure out where the pointerX and pointerY were in the global space, then apply the new matrix to get the updated coordinates. a = start[0]; b = start[1]; c = start[2]; d = start[3]; tx = start[4]; ty = start[5]; determinant = (a * d - b * c); pointerX = startPointerX * (d / determinant) + startPointerY * (-c / determinant) + ((c * ty - d * tx) / determinant); pointerY = startPointerX * (-b / determinant) + startPointerY * (a / determinant) + (-(a * ty - b * tx) / determinant); startPointerY = pointerX * matrix[1] + pointerY * matrix[3] + matrix[5]; startPointerX = pointerX * matrix[0] + pointerY * matrix[2] + matrix[4]; } if (!matrix[1] && !matrix[2] && matrix[0] == 1 && matrix[3] == 1 && matrix[4] == 0 && matrix[5] == 0) { //if there are no transforms, we can optimize performance by not factoring in the matrix matrix = null; } }, recordStartPositions = function() { var edgeTolerance = 1 - self.edgeResistance; updateMatrix(false); if (matrix) { startPointerX = self.pointerX * matrix[0] + self.pointerY * matrix[2] + matrix[4]; //translate to local coordinate system startPointerY = self.pointerX * matrix[1] + self.pointerY * matrix[3] + matrix[5]; } if (dirty) { setPointerPosition(self.pointerX, self.pointerY); render(true); } if (scrollProxy) { calculateBounds(); startElementY = scrollProxy.top(); startElementX = scrollProxy.left(); } else { //if the element is in the process of tweening, don't force snapping to occur because it could make it jump. Imagine the user throwing, then before it's done, clicking on the element in its inbetween state. if (isTweening()) { syncXY(true, true); calculateBounds(); } else { self.applyBounds(); } if (rotationMode) { rotationOrigin = _localToGlobal(target, {x:0, y:0}); syncXY(true, true); startElementX = self.x; //starting rotation (x always refers to rotation in type:"rotation", measured in degrees) startElementY = self.y = Math.atan2(rotationOrigin.y - self.pointerY, self.pointerX - rotationOrigin.x) * _RAD2DEG; } else { startScrollTop = target.parentNode ? target.parentNode.scrollTop || 0 : 0; startScrollLeft = target.parentNode ? target.parentNode.scrollLeft || 0 : 0; startElementY = _getStyle(target, yProp); //record the starting top and left values so that we can just add the mouse's movement to them later. startElementX = _getStyle(target, xProp); } } if (hasBounds && edgeTolerance) { if (startElementX > maxX) { startElementX = maxX + (startElementX - maxX) / edgeTolerance; } else if (startElementX < minX) { startElementX = minX - (minX - startElementX) / edgeTolerance; } if (!rotationMode) { if (startElementY > maxY) { startElementY = maxY + (startElementY - maxY) / edgeTolerance; } else if (startElementY < minY) { startElementY = minY - (minY - startElementY) / edgeTolerance; } } } self.startX = startElementX; self.startY = startElementY; }, isTweening = function() { return (self.tween && self.tween.isActive()); }, removePlaceholder = function() { if (_placeholderDiv.parentNode && !isTweening() && !self.isDragging) { //_placeholderDiv just props open auto-scrolling containers so they don't collapse as the user drags left/up. We remove it after dragging (and throwing, if necessary) finishes. _placeholderDiv.parentNode.removeChild(_placeholderDiv); } }, buildSnapFunc = function(snap, min, max, factor) { if (typeof(snap) === "function") { return function(n) { var edgeTolerance = !self.isPressed ? 1 : 1 - self.edgeResistance; //if we're tweening, disable the edgeTolerance because it's already factored into the tweening values (we don't want to apply it multiple times) return snap.call(self, (n > max ? max + (n - max) * edgeTolerance : (n < min) ? min + (n - min) * edgeTolerance : n)) * factor; }; } if (snap instanceof Array) { return function(n) { var i = snap.length, closest = 0, absDif = _max, val, dif; while (--i > -1) { val = snap[i]; dif = val - n; if (dif < 0) { dif = -dif; } if (dif < absDif && val >= min && val <= max) { closest = i; absDif = dif; } } return snap[closest]; }; } return isNaN(snap) ? function(n) { return n; } : function() { return snap * factor; }; }, buildPointSnapFunc = function(snap, minX, maxX, minY, maxY, radius, factor) { radius = radius || _max; if (typeof(snap) === "function") { return function(point) { var edgeTolerance = !self.isPressed ? 1 : 1 - self.edgeResistance, x = point.x, y = point.y, result, dx, dy; //if we're tweening, disable the edgeTolerance because it's already factored into the tweening values (we don't want to apply it multiple times) point.x = x = (x > maxX ? maxX + (x - maxX) * edgeTolerance : (x < minX) ? minX + (x - minX) * edgeTolerance : x); point.y = y = (y > maxY ? maxY + (y - maxY) * edgeTolerance : (y < minY) ? minY + (y - minY) * edgeTolerance : y); result = snap.call(self, point); if (result !== point) { point.x = result.x; point.y = result.y; } if (factor !== 1) { point.x *= factor; point.y *= factor; } if (radius < _max) { dx = point.x - x; dy = point.y - y; if (Math.sqrt(dx * dx + dy * dy) > radius) { point.x = x; point.y = y; } } return point; }; } if (snap instanceof Array) { return function(p) { var i = snap.length, closest = 0, minDist = _max, x, y, point, dist; while (--i > -1) { point = snap[i]; x = point.x - p.x; y = point.y - p.y; dist = Math.sqrt(x * x + y * y); if (dist < minDist) { closest = i; minDist = dist; } } return (minDist <= radius) ? snap[closest] : p; }; } return function(n) { return n; }; }, //called when the mouse is pressed (or touch starts) onPress = function(e) { var i; if (!enabled || self.isPressed || !e || ((e.type === "mousedown" || e.type === "pointerdown") && _getTime() - clickTime < 30 && _touchEventLookup[self.pointerEvent.type])) { //when we DON'T preventDefault() in order to accommodate touch-scrolling and the user just taps, many browsers also fire a mousedown/mouseup sequence AFTER the touchstart/touchend sequence, thus it'd result in two quick "click" events being dispatched. This line senses that condition and halts it on the subsequent mousedown. return; } interrupted = isTweening(); self.pointerEvent = e; if (_touchEventLookup[e.type]) { //note: on iOS, BOTH touchmove and mousemove are dispatched, but the mousemove has pageY and pageX of 0 which would mess up the calculations and needlessly hurt performance. touchEventTarget = (e.type.indexOf("touch") !== -1) ? (e.currentTarget || e.target) : _doc; //pointer-based touches (for Microsoft browsers) don't remain locked to the original target like other browsers, so we must use the document instead. The event type would be "MSPointerDown" or "pointerdown". _addListener(touchEventTarget, "touchend", onRelease); _addListener(touchEventTarget, "touchmove", onMove); _addListener(touchEventTarget, "touchcancel", onRelease); _addListener(_doc, "touchstart", _onMultiTouchDocument); } else { touchEventTarget = null; _addListener(_doc, "mousemove", onMove); //attach these to the document instead of the box itself so that if the user's mouse moves too quickly (and off of the box), things still work. } touchDragAxis = null; _addListener(_doc, "mouseup", onRelease); if (e && e.target) { _addListener(e.target, "mouseup", onRelease); //we also have to listen directly on the element because some browsers don't bubble up the event to the _doc on elements with contentEditable="true" } isClicking = (isClickable.call(self, e.target) && !vars.dragClickables); if (isClicking) { _addListener(e.target, "change", onRelease); //in some browsers, when you mousedown on a <select> element, no mouseup gets dispatched! So we listen for a "change" event instead. _dispatchEvent(self, "press", "onPress"); _setSelectable(triggers, true); //accommodates things like inputs and elements with contentEditable="true" (otherwise user couldn't drag to select text) return; } allowNativeTouchScrolling = (!touchEventTarget || allowX === allowY || self.vars.allowNativeTouchScrolling === false) ? false : allowX ? "y" : "x"; if (_isOldIE) { e = _populateIEEvent(e, true); } else if (!allowNativeTouchScrolling && !self.allowEventDefault) { e.preventDefault(); if (e.preventManipulation) { e.preventManipulation(); //for some Microsoft browsers } } if (e.changedTouches) { //touch events store the data slightly differently e = touch = e.changedTouches[0]; touchID = e.identifier; } else if (e.pointerId) { touchID = e.pointerId; //for some Microsoft browsers } else { touch = touchID = null; } _dragCount++; _addToRenderQueue(render); //causes the Draggable to render on each "tick" of TweenLite.ticker (performance optimization - updating values in a mousemove can cause them to happen too frequently, like multiple times between frame redraws which is wasteful, and it also prevents values from updating properly in IE8) startPointerY = self.pointerY = e.pageY; //record the starting x and y so that we can calculate the movement from the original in _onMouseMove startPointerX = self.pointerX = e.pageX; if (allowNativeTouchScrolling || self.autoScroll) { _recordMaxScrolls(target.parentNode); } if (target.parentNode && (scrollProxy || (self.autoScroll && !rotationMode && target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode)) && !target.getBBox) { //add a placeholder div to prevent the parent container from collapsing when the user drags the element left. _placeholderDiv.style.width = (target.parentNode.scrollWidth) + "px"; target.parentNode.appendChild(_placeholderDiv); } recordStartPositions(); if (self.tween) { self.tween.kill(); } self.isThrowing = false; TweenLite.killTweensOf(scrollProxy || target, true, killProps); //in case the user tries to drag it before the last tween is done. if (scrollProxy) { TweenLite.killTweensOf(target, true, {scrollTo:1}); //just in case the original target's scroll position is being tweened somewhere else. } self.tween = self.lockedAxis = null; if (vars.zIndexBoost || (!rotationMode && !scrollProxy && vars.zIndexBoost !== false)) { target.style.zIndex = Draggable.zIndex++; } self.isPressed = true; hasDragCallback = !!(vars.onDrag || self._listeners.drag); if (!rotationMode) { i = triggers.length; while (--i > -1) { _setStyle(triggers[i], "cursor", vars.cursor || "move"); } } _dispatchEvent(self, "press", "onPress"); }, //called every time the mouse/touch moves onMove = function(e) { var originalEvent = e, touches, pointerX, pointerY, i, dx, dy; if (!enabled || _isMultiTouching || !self.isPressed || !e) { return; } self.pointerEvent = e; touches = e.changedTouches; if (touches) { //touch events store the data slightly differently e = touches[0]; if (e !== touch && e.identifier !== touchID) { //Usually changedTouches[0] will be what we're looking for, but in case it's not, look through the rest of the array...(and Android browsers don't reuse the event like iOS) i = touches.length; while (--i > -1 && (e = touches[i]).identifier !== touchID) {} if (i < 0) { return; } } } else if (e.pointerId && touchID && e.pointerId !== touchID) { //for some Microsoft browsers, we must attach the listener to the doc rather than the trigger so that when the finger moves outside the bounds of the trigger, things still work. So if the event we're receiving has a pointerId that doesn't match the touchID, ignore it (for multi-touch) return; } if (_isOldIE) { e = _populateIEEvent(e, true); } else { if (touchEventTarget && allowNativeTouchScrolling && !touchDragAxis) { //Android browsers force us to decide on the first "touchmove" event if we should allow the default (scrolling) behavior or preventDefault(). Otherwise, a "touchcancel" will be fired and then no "touchmove" or "touchend" will fire during the scrolling (no good). pointerX = e.pageX; pointerY = e.pageY; if (matrix) { i = pointerX * matrix[0] + pointerY * matrix[2] + matrix[4]; pointerY = pointerX * matrix[1] + pointerY * matrix[3] + matrix[5]; pointerX = i; } dx = Math.abs(pointerX - startPointerX); dy = Math.abs(pointerY - startPointerY); if ((dx !== dy && (dx > minimumMovement || dy > minimumMovement)) || (_isAndroid && allowNativeTouchScrolling === touchDragAxis)) { touchDragAxis = (dx > dy && allowX) ? "x" : "y"; if (self.vars.lockAxisOnTouchScroll !== false) { self.lockedAxis = (touchDragAxis === "x") ? "y" : "x"; if (typeof(self.vars.onLockAxis) === "function") { self.vars.onLockAxis.call(self, originalEvent); } } if (_isAndroid && allowNativeTouchScrolling === touchDragAxis) { onRelease(originalEvent); return; } } } if (!self.allowEventDefault && (!allowNativeTouchScrolling || (touchDragAxis && allowNativeTouchScrolling !== touchDragAxis)) && originalEvent.cancelable !== false) { originalEvent.preventDefault(); if (originalEvent.preventManipulation) { //for some Microsoft browsers originalEvent.preventManipulation(); } } } if (self.autoScroll) { checkAutoScrollBounds = true; } setPointerPosition(e.pageX, e.pageY); }, setPointerPosition = function(pointerX, pointerY) { var dragTolerance = 1 - self.dragResistance, edgeTolerance = 1 - self.edgeResistance, xChange, yChange, x, y, dif, temp; self.pointerX = pointerX; self.pointerY = pointerY; if (rotationMode) { y = Math.atan2(rotationOrigin.y - pointerY, pointerX - rotationOrigin.x) * _RAD2DEG; dif = self.y - y; self.y = y; if (dif > 180) { startElementY -= 360; } else if (dif < -180) { startElementY += 360; } x = startElementX + (startElementY - y) * dragTolerance; } else { if (matrix) { temp = pointerX * matrix[0] + pointerY * matrix[2] + matrix[4]; pointerY = pointerX * matrix[1] + pointerY * matrix[3] + matrix[5]; pointerX = temp; } yChange = (pointerY - startPointerY); xChange = (pointerX - startPointerX); if (yChange < minimumMovement && yChange > -minimumMovement) { yChange = 0; } if (xChange < minimumMovement && xChange > -minimumMovement) { xChange = 0; } if ((self.lockAxis || self.lockedAxis) && (xChange || yChange)) { temp = self.lockedAxis; if (!temp) { self.lockedAxis = temp = (allowX && Math.abs(xChange) > Math.abs(yChange)) ? "y" : allowY ? "x" : null; if (temp && typeof(self.vars.onLockAxis) === "function") { self.vars.onLockAxis.call(self, self.pointerEvent); } } if (temp === "y") { yChange = 0; } else if (temp === "x") { xChange = 0; } } x = startElementX + xChange * dragTolerance; y = startElementY + yChange * dragTolerance; } if ((snapX || snapY || snapXY) && (self.x !== x || (self.y !== y && !rotationMode))) { if (snapXY) { _temp1.x = x; _temp1.y = y; temp = snapXY(_temp1); x = temp.x; y = temp.y; } if (snapX) { x = snapX(x); } if (snapY) { y = snapY(y); } } else if (hasBounds) { if (x > maxX) { x = maxX + (x - maxX) * edgeTolerance; } else if (x < minX) { x = minX + (x - minX) * edgeTolerance; } if (!rotationMode) { if (y > maxY) { y = maxY + (y - maxY) * edgeTolerance; } else if (y < minY) { y = minY + (y - minY) * edgeTolerance; } } } if (!rotationMode) { x = Math.round(x); //helps work around an issue with some Win Touch devices y = Math.round(y); } if (self.x !== x || (self.y !== y && !rotationMode)) { if (rotationMode) { self.endRotation = self.x = self.endX = x; dirty = true; } else { if (allowY) { self.y = self.endY = y; dirty = true; //a flag that indicates we need to render the target next time the TweenLite.ticker dispatches a "tick" event (typically on a requestAnimationFrame) - this is a performance optimization (we shouldn't render on every move because sometimes many move events can get dispatched between screen refreshes, and that'd be wasteful to render every time) } if (allowX) { self.x = self.endX = x; dirty = true; } } if (!self.isDragging && self.isPressed) { self.isDragging = true; _dispatchEvent(self, "dragstart", "onDragStart"); } } }, //called when the mouse/touch is released onRelease = function(e, force) { if (!enabled || !self.isPressed || (e && touchID != null && !force && ((e.pointerId && e.pointerId !== touchID) || (e.changedTouches && !_hasTouchID(e.changedTouches, touchID))))) { //for some Microsoft browsers, we must attach the listener to the doc rather than the trigger so that when the finger moves outside the bounds of the trigger, things still work. So if the event we're receiving has a pointerId that doesn't match the touchID, ignore it (for multi-touch) return; } self.isPressed = false; var originalEvent = e, wasDragging = self.isDragging, placeholderDelayedCall = TweenLite.delayedCall(0.001, removePlaceholder), touches, i, syntheticEvent, eventTarget, syntheticClick; if (touchEventTarget) { _removeListener(touchEventTarget, "touchend", onRelease); _removeListener(touchEventTarget, "touchmove", onMove); _removeListener(touchEventTarget, "touchcancel", onRelease); _removeListener(_doc, "touchstart", _onMultiTouchDocument); } else { _removeListener(_doc, "mousemove", onMove); } _removeListener(_doc, "mouseup", onRelease); if (e && e.target) { _removeListener(e.target, "mouseup", onRelease); } dirty = false; if (isClicking) { if (e) { _removeListener(e.target, "change", onRelease); } _setSelectable(triggers, false); _dispatchEvent(self, "release", "onRelease"); _dispatchEvent(self, "click", "onClick"); isClicking = false; return; } _removeFromRenderQueue(render); if (!rotationMode) { i = triggers.length; while (--i > -1) { _setStyle(triggers[i], "cursor", vars.cursor || "move"); } } if (wasDragging) { dragEndTime = _lastDragTime = _getTime(); self.isDragging = false; } _dragCount--; if (e) { if (_isOldIE) { e = _populateIEEvent(e, false); } touches = e.changedTouches; if (touches) { //touch events store the data slightly differently e = touches[0]; if (e !== touch && e.identifier !== touchID) { //Usually changedTouches[0] will be what we're looking for, but in case it's not, look through the rest of the array...(and Android browsers don't reuse the event like iOS) i = touches.length; while (--i > -1 && (e = touches[i]).identifier !== touchID) {} if (i < 0) { return; } } } self.pointerEvent = originalEvent; self.pointerX = e.pageX; self.pointerY = e.pageY; } if (originalEvent && !wasDragging) { if (interrupted && (vars.snap || vars.bounds)) { //otherwise, if the user clicks on the object while it's animating to a snapped position, and then releases without moving 3 pixels, it will just stay there (it should animate/snap) animate(vars.throwProps); } _dispatchEvent(self, "release", "onRelease"); if (!_isAndroid || originalEvent.type !== "touchmove") { //to accommodate native scrolling on Android devices, we have to immediately call onRelease() on the first touchmove event, but that shouldn't trigger a "click". _dispatchEvent(self, "click", "onClick"); eventTarget = originalEvent.target || originalEvent.srcElement || target; //old IE uses srcElement clickTime = _getTime(); syntheticClick = function() { // some browsers (like Firefox) won't trust script-generated clicks, so if the user tries to click on a video to play it, for example, it simply won't work. Since a regular "click" event will most likely be generated anyway (one that has its isTrusted flag set to true), we must slightly delay our script-generated click so that the "real"/trusted one is prioritized. Remember, when there are duplicate events in quick succession, we suppress all but the first one. Some browsers don't even trigger the "real" one at all, so our synthetic one is a safety valve that ensures that no matter what, a click event does get dispatched. if (clickTime !== clickDispatch && self.enabled() && !self.isPressed) { if (eventTarget.click) { //some browsers (like mobile Safari) don't properly trigger the click event eventTarget.click(); } else if (_doc.createEvent) { syntheticEvent = _doc.createEvent("MouseEvents"); syntheticEvent.initMouseEvent("click", true, true, window, 1, self.pointerEvent.screenX, self.pointerEvent.screenY, self.pointerX, self.pointerY, false, false, false, false, 0, null); eventTarget.dispatchEvent(syntheticEvent); } } }; if (!_isAndroid && !originalEvent.defaultPrevented) { //iOS Safari requires the synthetic click to happen immediately or else it simply won't work, but Android doesn't play nice. TweenLite.delayedCall(0.00001, syntheticClick); //in addition to the iOS bug workaround, there's a Firefox issue with clicking on things like a video to play, so we must fake a click event in a slightly delayed fashion. Previously, we listened for the "click" event with "capture" false which solved the video-click-to-play issue, but it would allow the "click" event to be dispatched twice like if you were using a jQuery.click() because that was handled in the capture phase, thus we had to switch to the capture phase to avoid the double-dispatching, but do the delayed synthetic click. } } } else { animate(vars.throwProps); //will skip if throwProps isn't defined or ThrowPropsPlugin isn't loaded. if (!_isOldIE && !self.allowEventDefault && originalEvent && (vars.dragClickables || !isClickable.call(self, originalEvent.target)) && wasDragging && (!allowNativeTouchScrolling || (touchDragAxis && allowNativeTouchScrolling === touchDragAxis)) && originalEvent.cancelable !== false) { originalEvent.preventDefault(); if (originalEvent.preventManipulation) { originalEvent.preventManipulation(); //for some Microsoft browsers } } _dispatchEvent(self, "release", "onRelease"); } if (isTweening()) { placeholderDelayedCall.duration( self.tween.duration() ); //sync the timing so that the placeholder DIV gets } if (wasDragging) { _dispatchEvent(self, "dragend", "onDragEnd"); } return true; }, updateScroll = function(e) { if (e && self.isDragging && !scrollProxy) { var parent = e.target || e.srcElement || target.parentNode, deltaX = parent.scrollLeft - parent._gsScrollX, deltaY = parent.scrollTop - parent._gsScrollY; if (deltaX || deltaY) { if (matrix) { startPointerX -= deltaX * matrix[0] + deltaY * matrix[2]; startPointerY -= deltaY * matrix[3] + deltaX * matrix[1]; } else { startPointerX -= deltaX; startPointerY -= deltaY; } parent._gsScrollX += deltaX; parent._gsScrollY += deltaY; setPointerPosition(self.pointerX, self.pointerY); } } }, onClick = function(e) { //this was a huge pain in the neck to align all the various browsers and their behaviors. Chrome, Firefox, Safari, Opera, Android, and Microsoft Edge all handle events differently! Some will only trigger native behavior (like checkbox toggling) from trusted events. Others don't even support isTrusted, but require 2 events to flow through before triggering native behavior. Edge treats everything as trusted but also mandates that 2 flow through to trigger the correct native behavior. var time = _getTime(), recentlyClicked = (time - clickTime < 40), recentlyDragged = (time - dragEndTime < 40), alreadyDispatched = (recentlyClicked && clickDispatch === clickTime), isModern = !!e.preventDefault, defaultPrevented = (self.pointerEvent && self.pointerEvent.defaultPrevented), alreadyDispatchedTrusted = (recentlyClicked && trustedClickDispatch === clickTime), trusted = e.isTrusted || (e.isTrusted == null && recentlyClicked && alreadyDispatched); //note: Safari doesn't support isTrusted, and it won't properly execute native behavior (like toggling checkboxes) on the first synthetic "click" event - we must wait for the 2nd and treat it as trusted (but stop propagation at that point). Confusing, I know. Don't you love cross-browser compatibility challenges? if (isModern && (alreadyDispatched || (recentlyDragged && self.vars.suppressClickOnDrag !== false) )) { e.stopImmediatePropagation(); } if (recentlyClicked && !(self.pointerEvent && self.pointerEvent.defaultPrevented) && (!alreadyDispatched || (trusted !== alreadyDispatchedTrusted))) { //let the first click pass through unhindered. Let the next one only if it's trusted, then no more (stop quick-succession ones) if (trusted && alreadyDispatched) { trustedClickDispatch = clickTime; } clickDispatch = clickTime; return; } if (self.isPressed || recentlyDragged || recentlyClicked) { if (!isModern) { e.returnValue = false; } else if (!trusted || !e.detail || !recentlyClicked || defaultPrevented) { e.preventDefault(); if (e.preventManipulation) { e.preventManipulation(); //for some Microsoft browsers } } } }; old = Draggable.get(this.target); if (old) { old.kill(); // avoids duplicates (an element can only be controlled by one Draggable) } //give the user access to start/stop dragging... this.startDrag = function(e) { onPress(e); if (!self.isDragging) { self.isDragging = true; _dispatchEvent(self, "dragstart", "onDragStart"); } }; this.drag = onMove; this.endDrag = function(e) { onRelease(e, true); }; this.timeSinceDrag = function() { return self.isDragging ? 0 : (_getTime() - dragEndTime) / 1000; }; this.hitTest = function(target, threshold) { return Draggable.hitTest(self.target, target, threshold); }; this.getDirection = function(from, diagonalThreshold) { //from can be "start" (default), "velocity", or an element var mode = (from === "velocity" && ThrowPropsPlugin) ? from : (typeof(from) === "object" && !rotationMode) ? "element" : "start", xChange, yChange, ratio, direction, r1, r2; if (mode === "element") { r1 = _parseRect(self.target); r2 = _parseRect(from); } xChange = (mode === "start") ? self.x - startElementX : (mode === "velocity") ? ThrowPropsPlugin.getVelocity(this.target, xProp) : (r1.left + r1.width / 2) - (r2.left + r2.width / 2); if (rotationMode) { return xChange < 0 ? "counter-clockwise" : "clockwise"; } else { diagonalThreshold = diagonalThreshold || 2; yChange = (mode === "start") ? self.y - startElementY : (mode === "velocity") ? ThrowPropsPlugin.getVelocity(this.target, yProp) : (r1.top + r1.height / 2) - (r2.top + r2.height / 2); ratio = Math.abs(xChange / yChange); direction = (ratio < 1 / diagonalThreshold) ? "" : (xChange < 0) ? "left" : "right"; if (ratio < diagonalThreshold) { if (direction !== "") { direction += "-"; } direction += (yChange < 0) ? "up" : "down"; } } return direction; }; this.applyBounds = function(newBounds) { var x, y, forceZeroVelocity, e, parent, isRoot; if (newBounds && vars.bounds !== newBounds) { vars.bounds = newBounds; return self.update(true); } syncXY(true); calculateBounds(); if (hasBounds) { x = self.x; y = self.y; if (x > maxX) { x = maxX; } else if (x < minX) { x = minX; } if (y > maxY) { y = maxY; } else if (y < minY) { y = minY; } if (self.x !== x || self.y !== y) { forceZeroVelocity = true; self.x = self.endX = x; if (rotationMode) { self.endRotation = x; } else { self.y = self.endY = y; } dirty = true; render(true); if (self.autoScroll && !self.isDragging) { _recordMaxScrolls(target.parentNode); e = target; _windowProxy.scrollTop = ((window.pageYOffset != null) ? window.pageYOffset : (_docElement.scrollTop != null) ? _docElement.scrollTop : _doc.body.scrollTop); _windowProxy.scrollLeft = ((window.pageXOffset != null) ? window.pageXOffset : (_docElement.scrollLeft != null) ? _docElement.scrollLeft : _doc.body.scrollLeft); while (e && !isRoot) { //walk up the chain and sense wherever the scrollTop/scrollLeft exceeds the maximum. isRoot = _isRoot(e.parentNode); parent = isRoot ? _windowProxy : e.parentNode; if (allowY && parent.scrollTop > parent._gsMaxScrollY) { parent.scrollTop = parent._gsMaxScrollY; } if (allowX && parent.scrollLeft > parent._gsMaxScrollX) { parent.scrollLeft = parent._gsMaxScrollX; } e = parent; } } } if (self.isThrowing && (forceZeroVelocity || self.endX > maxX || self.endX < minX || self.endY > maxY || self.endY < minY)) { animate(vars.throwProps, forceZeroVelocity); } } return self; }; this.update = function(applyBounds, sticky, ignoreExternalChanges) { var x = self.x, y = self.y; updateMatrix(!sticky); if (applyBounds) { self.applyBounds(); } else { if (dirty && ignoreExternalChanges) { render(true); } syncXY(true); } if (sticky) { setPointerPosition(self.pointerX, self.pointerY); if (dirty) { render(true); } } if (self.isPressed && !sticky && ((allowX && Math.abs(x - self.x) > 0.01) || (allowY && (Math.abs(y - self.y) > 0.01 && !rotationMode)))) { recordStartPositions(); } if (self.autoScroll) { _recordMaxScrolls(target.parentNode); checkAutoScrollBounds = self.isDragging; render(true); } if (self.autoScroll) { //in case reparenting occurred. _removeScrollListener(target, updateScroll); _addScrollListener(target, updateScroll); } return self; }; this.enable = function(type) { var id, i, trigger; if (type !== "soft") { i = triggers.length; while (--i > -1) { trigger = triggers[i]; _addListener(trigger, "mousedown", onPress); _addListener(trigger, "touchstart", onPress); _addListener(trigger, "click", onClick, true); //note: used to pass true for capture but it prevented click-to-play-video functionality in Firefox. if (!rotationMode) { _setStyle(trigger, "cursor", vars.cursor || "move"); } _setStyle(trigger, "touchCallout", "none"); _setStyle(trigger, "touchAction", (allowX === allowY) ? "none" : allowX ? "pan-y" : "pan-x"); } _setSelectable(triggers, false); } _addScrollListener(target, updateScroll); enabled = true; if (ThrowPropsPlugin && type !== "soft") { ThrowPropsPlugin.track(scrollProxy || target, (xyMode ? "x,y" : rotationMode ? "rotation" : "top,left")); } if (scrollProxy) { scrollProxy.enable(); } target._gsDragID = id = "d" + (_lookupCount++); _lookup[id] = this; if (scrollProxy) { scrollProxy.element._gsDragID = id; } TweenLite.set(target, {x:"+=0", overwrite:false}); //simply ensures that there's a _gsTransform on the element. applyObj = { t:target, data:_isOldIE ? cssVars : target._gsTransform, tween:{}, setRatio:(_isOldIE ? function() { TweenLite.set(target, tempVars); } : CSSPlugin._internals.setTransformRatio || CSSPlugin._internals.set3DTransformRatio) }; recordStartPositions(); self.update(true); return self; }; this.disable = function(type) { var dragging = self.isDragging, i, trigger; if (!rotationMode) { i = triggers.length; while (--i > -1) { _setStyle(triggers[i], "cursor", null); } } if (type !== "soft") { i = triggers.length; while (--i > -1) { trigger = triggers[i]; _setStyle(trigger, "touchCallout", null); _setStyle(trigger, "touchAction", null); _removeListener(trigger, "mousedown", onPress); _removeListener(trigger, "touchstart", onPress); _removeListener(trigger, "click", onClick); } _setSelectable(triggers, true); if (touchEventTarget) { _removeListener(touchEventTarget, "touchcancel", onRelease); _removeListener(touchEventTarget, "touchend", onRelease); _removeListener(touchEventTarget, "touchmove", onMove); } _removeListener(_doc, "mouseup", onRelease); _removeListener(_doc, "mousemove", onMove); } _removeScrollListener(target, updateScroll); enabled = false; if (ThrowPropsPlugin && type !== "soft") { ThrowPropsPlugin.untrack(scrollProxy || target, (xyMode ? "x,y" : rotationMode ? "rotation" : "top,left")); } if (scrollProxy) { scrollProxy.disable(); } _removeFromRenderQueue(render); self.isDragging = self.isPressed = isClicking = false; if (dragging) { _dispatchEvent(self, "dragend", "onDragEnd"); } return self; }; this.enabled = function(value, type) { return arguments.length ? (value ? self.enable(type) : self.disable(type)) : enabled; }; this.kill = function() { self.isThrowing = false; TweenLite.killTweensOf(scrollProxy || target, true, killProps); self.disable(); delete _lookup[target._gsDragID]; return self; }; if (type.indexOf("scroll") !== -1) { scrollProxy = this.scrollProxy = new ScrollProxy(target, _extend({onKill:function() { //ScrollProxy's onKill() gets called if/when the ScrollProxy senses that the user interacted with the scroll position manually (like using the scrollbar). IE9 doesn't fire the "mouseup" properly when users drag the scrollbar of an element, so this works around that issue. if (self.isPressed) { onRelease(null); }}}, vars)); //a bug in many Android devices' stock browser causes scrollTop to get forced back to 0 after it is altered via JS, so we set overflow to "hidden" on mobile/touch devices (they hide the scroll bar anyway). That works around the bug. (This bug is discussed at https://code.google.com/p/android/issues/detail?id=19625) target.style.overflowY = (allowY && !_isTouchDevice) ? "auto" : "hidden"; target.style.overflowX = (allowX && !_isTouchDevice) ? "auto" : "hidden"; target = scrollProxy.content; } if (vars.force3D !== false) { TweenLite.set(target, {force3D:true}); //improve performance by forcing a GPU layer when possible } if (rotationMode) { killProps.rotation = 1; } else { if (allowX) { killProps[xProp] = 1; } if (allowY) { killProps[yProp] = 1; } } if (rotationMode) { tempVars = _tempVarsRotation; cssVars = tempVars.css; tempVars.overwrite = false; } else if (xyMode) { tempVars = (allowX && allowY) ? _tempVarsXY : allowX ? _tempVarsX : _tempVarsY; cssVars = tempVars.css; tempVars.overwrite = false; } this.enable(); }, p = Draggable.prototype = new EventDispatcher(); p.constructor = Draggable; p.pointerX = p.pointerY = p.startX = p.startY = p.deltaX = p.deltaY = 0; p.isDragging = p.isPressed = false; Draggable.version = "0.15.0"; Draggable.zIndex = 1000; _addListener(_doc, "touchcancel", function() { //some older Android devices intermittently stop dispatching "touchmove" events if we don't listen for "touchcancel" on the document. Very strange indeed. }); _addListener(_doc, "contextmenu", function(e) { var p; for (p in _lookup) { if (_lookup[p].isPressed) { _lookup[p].endDrag(); } } }); Draggable.create = function(targets, vars) { if (typeof(targets) === "string") { targets = TweenLite.selector(targets); } var a = (!targets || targets.length === 0) ? [] : _isArrayLike(targets) ? _flattenArray(targets) : [targets], i = a.length; while (--i > -1) { a[i] = new Draggable(a[i], vars); } return a; }; Draggable.get = function(target) { return _lookup[(_unwrapElement(target) || {})._gsDragID]; }; Draggable.timeSinceDrag = function() { return (_getTime() - _lastDragTime) / 1000; }; var _tempRect = {}, //reuse to reduce garbage collection tasks _oldIERect = function(e) { //IE8 doesn't support getBoundingClientRect(), so we use this as a backup. var top = 0, left = 0, width, height; e = _unwrapElement(e); width = e.offsetWidth; height = e.offsetHeight; while(e) { top += e.offsetTop; left += e.offsetLeft; e = e.offsetParent; } return {top: top, left: left, width: width, height: height}; }, _parseRect = function(e, undefined) { //accepts a DOM element, a mouse event, or a rectangle object and returns the corresponding rectangle with left, right, width, height, top, and bottom properties if (e === window) { _tempRect.left = _tempRect.top = 0; _tempRect.width = _tempRect.right = _docElement.clientWidth || e.innerWidth || _doc.body.clientWidth || 0; _tempRect.height = _tempRect.bottom = ((e.innerHeight || 0) - 20 < _docElement.clientHeight) ? _docElement.clientHeight : e.innerHeight || _doc.body.clientHeight || 0; return _tempRect; } var r = (e.pageX !== undefined) ? {left:e.pageX - _getDocScrollLeft(), top:e.pageY - _getDocScrollTop(), right:e.pageX - _getDocScrollLeft() + 1, bottom:e.pageY - _getDocScrollTop() + 1} : (!e.nodeType && e.left !== undefined && e.top !== undefined) ? e : _isOldIE ? _oldIERect(e) : _unwrapElement(e).getBoundingClientRect(); if (r.right === undefined && r.width !== undefined) { r.right = r.left + r.width; r.bottom = r.top + r.height; } else if (r.width === undefined) { //some browsers don't include width and height properties. We can't just set them directly on r because some browsers throw errors, so create a new generic object. r = {width: r.right - r.left, height: r.bottom - r.top, right: r.right, left: r.left, bottom: r.bottom, top: r.top}; } return r; }; Draggable.hitTest = function(obj1, obj2, threshold) { if (obj1 === obj2) { return false; } var r1 = _parseRect(obj1), r2 = _parseRect(obj2), isOutside = (r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top), overlap, area, isRatio; if (isOutside || !threshold) { return !isOutside; } isRatio = ((threshold + "").indexOf("%") !== -1); threshold = parseFloat(threshold) || 0; overlap = {left:Math.max(r1.left, r2.left), top:Math.max(r1.top, r2.top)}; overlap.width = Math.min(r1.right, r2.right) - overlap.left; overlap.height = Math.min(r1.bottom, r2.bottom) - overlap.top; if (overlap.width < 0 || overlap.height < 0) { return false; } if (isRatio) { threshold *= 0.01; area = overlap.width * overlap.height; return (area >= r1.width * r1.height * threshold || area >= r2.width * r2.height * threshold); } return (overlap.width > threshold && overlap.height > threshold); }; _placeholderDiv.style.cssText = "visibility:hidden;height:1px;top:-1px;pointer-events:none;position:relative;clear:both;"; return Draggable; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite", "./CSSPlugin"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); require("./CSSPlugin.js"); module.exports = getGlobal(); } }("Draggable")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 | 1 1 1 1 12 12 12 12 6 6 6 44 44 44 42 42 42 42 3 3 3 3 3 3 3 2 2 1 1 2 2 2 2 2 1 1 1 1 1 2 2 2 1 1 1 1 1 2 2 2 40 40 40 40 40 40 40 40 2 127 2 2 2 40 40 2 1 1 1 1 1 1 1 1 3 3 3 3 3 3 3 3 3 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 1.15.5 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("easing.Back", ["easing.Ease"], function(Ease) { var w = (_gsScope.GreenSockGlobals || _gsScope), gs = w.com.greensock, _2PI = Math.PI * 2, _HALF_PI = Math.PI / 2, _class = gs._class, _create = function(n, f) { var C = _class("easing." + n, function(){}, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; return C; }, _easeReg = Ease.register || function(){}, //put an empty function in place just as a safety measure in case someone loads an OLD version of TweenLite.js where Ease.register doesn't exist. _wrap = function(name, EaseOut, EaseIn, EaseInOut, aliases) { var C = _class("easing."+name, { easeOut:new EaseOut(), easeIn:new EaseIn(), easeInOut:new EaseInOut() }, true); _easeReg(C, name); return C; }, EasePoint = function(time, value, next) { this.t = time; this.v = value; if (next) { this.next = next; next.prev = this; this.c = next.v - value; this.gap = next.t - time; } }, //Back _createBack = function(n, f) { var C = _class("easing." + n, function(overshoot) { this._p1 = (overshoot || overshoot === 0) ? overshoot : 1.70158; this._p2 = this._p1 * 1.525; }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(overshoot) { return new C(overshoot); }; return C; }, Back = _wrap("Back", _createBack("BackOut", function(p) { return ((p = p - 1) * p * ((this._p1 + 1) * p + this._p1) + 1); }), _createBack("BackIn", function(p) { return p * p * ((this._p1 + 1) * p - this._p1); }), _createBack("BackInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * p * p * ((this._p2 + 1) * p - this._p2) : 0.5 * ((p -= 2) * p * ((this._p2 + 1) * p + this._p2) + 2); }) ), //SlowMo SlowMo = _class("easing.SlowMo", function(linearRatio, power, yoyoMode) { power = (power || power === 0) ? power : 0.7; if (linearRatio == null) { linearRatio = 0.7; } else Iif (linearRatio > 1) { linearRatio = 1; } this._p = (linearRatio !== 1) ? power : 0; this._p1 = (1 - linearRatio) / 2; this._p2 = linearRatio; this._p3 = this._p1 + this._p2; this._calcEnd = (yoyoMode === true); }, true), p = SlowMo.prototype = new Ease(), SteppedEase, RoughEase, _createElastic; p.constructor = SlowMo; p.getRatio = function(p) { var r = p + (0.5 - p) * this._p; if (p < this._p1) { return this._calcEnd ? 1 - ((p = 1 - (p / this._p1)) * p) : r - ((p = 1 - (p / this._p1)) * p * p * p * r); } else if (p > this._p3) { return this._calcEnd ? 1 - (p = (p - this._p3) / this._p1) * p : r + ((p - r) * (p = (p - this._p3) / this._p1) * p * p * p); } return this._calcEnd ? 1 : r; }; SlowMo.ease = new SlowMo(0.7, 0.7); p.config = SlowMo.config = function(linearRatio, power, yoyoMode) { return new SlowMo(linearRatio, power, yoyoMode); }; //SteppedEase SteppedEase = _class("easing.SteppedEase", function(steps) { steps = steps || 1; this._p1 = 1 / steps; this._p2 = steps + 1; }, true); p = SteppedEase.prototype = new Ease(); p.constructor = SteppedEase; p.getRatio = function(p) { if (p < 0) { p = 0; } else if (p >= 1) { p = 0.999999999; } return ((this._p2 * p) >> 0) * this._p1; }; p.config = SteppedEase.config = function(steps) { return new SteppedEase(steps); }; //RoughEase RoughEase = _class("easing.RoughEase", function(vars) { vars = vars || {}; var taper = vars.taper || "none", a = [], cnt = 0, points = (vars.points || 20) | 0, i = points, randomize = (vars.randomize !== false), clamp = (vars.clamp === true), template = (vars.template instanceof Ease) ? vars.template : null, strength = (typeof(vars.strength) === "number") ? vars.strength * 0.4 : 0.4, x, y, bump, invX, obj, pnt; while (--i > -1) { x = randomize ? Math.random() : (1 / points) * i; y = template ? template.getRatio(x) : x; Eif (taper === "none") { bump = strength; } else if (taper === "out") { invX = 1 - x; bump = invX * invX * strength; } else if (taper === "in") { bump = x * x * strength; } else if (x < 0.5) { //"both" (start) invX = x * 2; bump = invX * invX * 0.5 * strength; } else { //"both" (end) invX = (1 - x) * 2; bump = invX * invX * 0.5 * strength; } Eif (randomize) { y += (Math.random() * bump) - (bump * 0.5); } else if (i % 2) { y += bump * 0.5; } else { y -= bump * 0.5; } Iif (clamp) { if (y > 1) { y = 1; } else if (y < 0) { y = 0; } } a[cnt++] = {x:x, y:y}; } a.sort(function(a, b) { return a.x - b.x; }); pnt = new EasePoint(1, 1, null); i = points; while (--i > -1) { obj = a[i]; pnt = new EasePoint(obj.x, obj.y, pnt); } this._prev = new EasePoint(0, 0, (pnt.t !== 0) ? pnt : pnt.next); }, true); p = RoughEase.prototype = new Ease(); p.constructor = RoughEase; p.getRatio = function(p) { var pnt = this._prev; if (p > pnt.t) { while (pnt.next && p >= pnt.t) { pnt = pnt.next; } pnt = pnt.prev; } else { while (pnt.prev && p <= pnt.t) { pnt = pnt.prev; } } this._prev = pnt; return (pnt.v + ((p - pnt.t) / pnt.gap) * pnt.c); }; p.config = function(vars) { return new RoughEase(vars); }; RoughEase.ease = new RoughEase(); //Bounce _wrap("Bounce", _create("BounceOut", function(p) { if (p < 1 / 2.75) { return 7.5625 * p * p; } else if (p < 2 / 2.75) { return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; }), _create("BounceIn", function(p) { if ((p = 1 - p) < 1 / 2.75) { return 1 - (7.5625 * p * p); } else if (p < 2 / 2.75) { return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75); } else if (p < 2.5 / 2.75) { return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375); } return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375); }), _create("BounceInOut", function(p) { var invert = (p < 0.5); if (invert) { p = 1 - (p * 2); } else { p = (p * 2) - 1; } if (p < 1 / 2.75) { p = 7.5625 * p * p; } else if (p < 2 / 2.75) { p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } else { p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; } return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5; }) ); //CIRC _wrap("Circ", _create("CircOut", function(p) { return Math.sqrt(1 - (p = p - 1) * p); }), _create("CircIn", function(p) { return -(Math.sqrt(1 - (p * p)) - 1); }), _create("CircInOut", function(p) { return ((p*=2) < 1) ? -0.5 * (Math.sqrt(1 - p * p) - 1) : 0.5 * (Math.sqrt(1 - (p -= 2) * p) + 1); }) ); //Elastic _createElastic = function(n, f, def) { var C = _class("easing." + n, function(amplitude, period) { this._p1 = (amplitude >= 1) ? amplitude : 1; //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1. this._p2 = (period || def) / (amplitude < 1 ? amplitude : 1); this._p3 = this._p2 / _2PI * (Math.asin(1 / this._p1) || 0); this._p2 = _2PI / this._p2; //precalculate to optimize }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(amplitude, period) { return new C(amplitude, period); }; return C; }; _wrap("Elastic", _createElastic("ElasticOut", function(p) { return this._p1 * Math.pow(2, -10 * p) * Math.sin( (p - this._p3) * this._p2 ) + 1; }, 0.3), _createElastic("ElasticIn", function(p) { return -(this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2 )); }, 0.3), _createElastic("ElasticInOut", function(p) { return ((p *= 2) < 1) ? -0.5 * (this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2)) : this._p1 * Math.pow(2, -10 *(p -= 1)) * Math.sin( (p - this._p3) * this._p2 ) * 0.5 + 1; }, 0.45) ); //Expo _wrap("Expo", _create("ExpoOut", function(p) { return 1 - Math.pow(2, -10 * p); }), _create("ExpoIn", function(p) { return Math.pow(2, 10 * (p - 1)) - 0.001; }), _create("ExpoInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); }) ); //Sine _wrap("Sine", _create("SineOut", function(p) { return Math.sin(p * _HALF_PI); }), _create("SineIn", function(p) { return -Math.cos(p * _HALF_PI) + 1; }), _create("SineInOut", function(p) { return -0.5 * (Math.cos(Math.PI * p) - 1); }) ); _class("easing.EaseLookup", { find:function(s) { return Ease.map[s]; } }, true); //register the non-standard eases _easeReg(w.SlowMo, "SlowMo", "ease,"); _easeReg(RoughEase, "RoughEase", "ease,"); _easeReg(SteppedEase, "SteppedEase", "ease,"); return Back; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function() { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope); }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }()); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 | 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.2.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _numExp = /(\d|\.)+/g, _ColorFilter, _ColorMatrixFilter, _colorProps = ["redMultiplier","greenMultiplier","blueMultiplier","alphaMultiplier","redOffset","greenOffset","blueOffset","alphaOffset"], _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, _parseColor = function(color) { if (color === "" || color == null || color === "none") { return _colorLookup.transparent; } else if (_colorLookup[color]) { return _colorLookup[color]; } else if (typeof(color) === "number") { return [color >> 16, (color >> 8) & 255, color & 255]; } else if (color.charAt(0) === "#") { if (color.length === 4) { //for shorthand like #9F0 color = "#" + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2) + color.charAt(3) + color.charAt(3); } color = parseInt(color.substr(1), 16); return [color >> 16, (color >> 8) & 255, color & 255]; } return color.match(_numExp) || _colorLookup.transparent; }, _parseColorFilter = function(t, v, pg) { if (!_ColorFilter) { _ColorFilter = (_gsScope.ColorFilter || _gsScope.createjs.ColorFilter); if (!_ColorFilter) { throw("EaselPlugin error: The EaselJS ColorFilter JavaScript file wasn't loaded."); } } var filters = t.filters || [], i = filters.length, c, s, e, a, p; while (--i > -1) { if (filters[i] instanceof _ColorFilter) { s = filters[i]; break; } } if (!s) { s = new _ColorFilter(); filters.push(s); t.filters = filters; } e = s.clone(); if (v.tint != null) { c = _parseColor(v.tint); a = (v.tintAmount != null) ? Number(v.tintAmount) : 1; e.redOffset = Number(c[0]) * a; e.greenOffset = Number(c[1]) * a; e.blueOffset = Number(c[2]) * a; e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1 - a; } else { for (p in v) { if (p !== "exposure") if (p !== "brightness") { e[p] = Number(v[p]); } } } if (v.exposure != null) { e.redOffset = e.greenOffset = e.blueOffset = 255 * (Number(v.exposure) - 1); e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1; } else if (v.brightness != null) { a = Number(v.brightness) - 1; e.redOffset = e.greenOffset = e.blueOffset = (a > 0) ? a * 255 : 0; e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1 - Math.abs(a); } i = 8; while (--i > -1) { p = _colorProps[i]; if (s[p] !== e[p]) { pg._addTween(s, p, s[p], e[p], "easel_colorFilter"); } } pg._overwriteProps.push("easel_colorFilter"); if (!t.cacheID) { throw("EaselPlugin warning: for filters to display in EaselJS, you must call the object's cache() method first. " + t); } }, _idMatrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0], _lumR = 0.212671, _lumG = 0.715160, _lumB = 0.072169, _applyMatrix = function(m, m2) { if (!(m instanceof Array) || !(m2 instanceof Array)) { return m2; } var temp = [], i = 0, z = 0, y, x; for (y = 0; y < 4; y++) { for (x = 0; x < 5; x++) { z = (x === 4) ? m[i + 4] : 0; temp[i + x] = m[i] * m2[x] + m[i+1] * m2[x + 5] + m[i+2] * m2[x + 10] + m[i+3] * m2[x + 15] + z; } i += 5; } return temp; }, _setSaturation = function(m, n) { if (isNaN(n)) { return m; } var inv = 1 - n, r = inv * _lumR, g = inv * _lumG, b = inv * _lumB; return _applyMatrix([r + n, g, b, 0, 0, r, g + n, b, 0, 0, r, g, b + n, 0, 0, 0, 0, 0, 1, 0], m); }, _colorize = function(m, color, amount) { if (isNaN(amount)) { amount = 1; } var c = _parseColor(color), r = c[0] / 255, g = c[1] / 255, b = c[2] / 255, inv = 1 - amount; return _applyMatrix([inv + amount * r * _lumR, amount * r * _lumG, amount * r * _lumB, 0, 0, amount * g * _lumR, inv + amount * g * _lumG, amount * g * _lumB, 0, 0, amount * b * _lumR, amount * b * _lumG, inv + amount * b * _lumB, 0, 0, 0, 0, 0, 1, 0], m); }, _setHue = function(m, n) { if (isNaN(n)) { return m; } n *= Math.PI / 180; var c = Math.cos(n), s = Math.sin(n); return _applyMatrix([(_lumR + (c * (1 - _lumR))) + (s * (-_lumR)), (_lumG + (c * (-_lumG))) + (s * (-_lumG)), (_lumB + (c * (-_lumB))) + (s * (1 - _lumB)), 0, 0, (_lumR + (c * (-_lumR))) + (s * 0.143), (_lumG + (c * (1 - _lumG))) + (s * 0.14), (_lumB + (c * (-_lumB))) + (s * -0.283), 0, 0, (_lumR + (c * (-_lumR))) + (s * (-(1 - _lumR))), (_lumG + (c * (-_lumG))) + (s * _lumG), (_lumB + (c * (1 - _lumB))) + (s * _lumB), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1], m); }, _setContrast = function(m, n) { if (isNaN(n)) { return m; } n += 0.01; return _applyMatrix([n,0,0,0,128 * (1 - n), 0,n,0,0,128 * (1 - n), 0,0,n,0,128 * (1 - n), 0,0,0,1,0], m); }, _parseColorMatrixFilter = function(t, v, pg) { if (!_ColorMatrixFilter) { _ColorMatrixFilter = (_gsScope.ColorMatrixFilter || _gsScope.createjs.ColorMatrixFilter); if (!_ColorMatrixFilter) { throw("EaselPlugin error: The EaselJS ColorMatrixFilter JavaScript file wasn't loaded."); } } var filters = t.filters || [], i = filters.length, matrix, startMatrix, s; while (--i > -1) { if (filters[i] instanceof _ColorMatrixFilter) { s = filters[i]; break; } } if (!s) { s = new _ColorMatrixFilter(_idMatrix.slice()); filters.push(s); t.filters = filters; } startMatrix = s.matrix; matrix = _idMatrix.slice(); if (v.colorize != null) { matrix = _colorize(matrix, v.colorize, Number(v.colorizeAmount)); } if (v.contrast != null) { matrix = _setContrast(matrix, Number(v.contrast)); } if (v.hue != null) { matrix = _setHue(matrix, Number(v.hue)); } if (v.saturation != null) { matrix = _setSaturation(matrix, Number(v.saturation)); } i = matrix.length; while (--i > -1) { if (matrix[i] !== startMatrix[i]) { pg._addTween(startMatrix, i, startMatrix[i], matrix[i], "easel_colorMatrixFilter"); } } pg._overwriteProps.push("easel_colorMatrixFilter"); if (!t.cacheID) { throw("EaselPlugin warning: for filters to display in EaselJS, you must call the object's cache() method first. " + t); } pg._matrix = startMatrix; }; _gsScope._gsDefine.plugin({ propName: "easel", priority: -1, version: "0.2.1", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { this._target = target; var p, pt, tint, colorMatrix, end, labels, i; for (p in value) { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } if (p === "colorFilter" || p === "tint" || p === "tintAmount" || p === "exposure" || p === "brightness") { if (!tint) { _parseColorFilter(target, value.colorFilter || value, this); tint = true; } } else if (p === "saturation" || p === "contrast" || p === "hue" || p === "colorize" || p === "colorizeAmount") { if (!colorMatrix) { _parseColorMatrixFilter(target, value.colorMatrixFilter || value, this); colorMatrix = true; } } else if (p === "frame") { this._firstPT = pt = {_next:this._firstPT, t:target, p:"gotoAndStop", s:target.currentFrame, f:true, n:"frame", pr:0, type:0, m:Math.round}; if (typeof(end) === "string" && end.charAt(1) !== "=" && (labels = target.labels)) { for (i = 0; i < labels.length; i++) { if (labels[i].label === end) { end = labels[i].position; } } } pt.c = (typeof(end) === "number") ? end - pt.s : parseFloat((end+"").split("=").join("")); if (pt._next) { pt._next._prev = pt; } } else if (target[p] != null) { this._firstPT = pt = {_next:this._firstPT, t:target, p:p, f:(typeof(target[p]) === "function"), n:p, pr:0, type:0}; pt.s = (!pt.f) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ](); pt.c = (typeof(end) === "number") ? end - pt.s : (typeof(end) === "string") ? parseFloat(end.split("=").join("")) : 0; if (pt._next) { pt._next._prev = pt; } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var pt = this._firstPT, min = 0.000001, val; while (pt) { val = pt.c * v + pt.s; if (pt.m) { val = pt.m(val, pt.t); } else if (val < min && val > -min) { val = 0; } if (pt.f) { pt.t[pt.p](val); } else { pt.t[pt.p] = val; } pt = pt._next; } if (this._target.cacheID) { this._target.updateCache(); } } }); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("EaselPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1 1 1 1 | /*! * VERSION: 0.1.3 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine.plugin({ propName: "endArray", API: 2, version: "0.1.3", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { var i = value.length, a = this.a = [], start, end; this.target = target; this._mod = 0; if (!i) { return false; } while (--i > -1) { start = target[i]; end = value[i]; if (start !== end) { a.push({i:i, s:start, c:end - start}); } } return true; }, mod: function(lookup) { if (typeof(lookup.endArray) === "function") { this._mod = lookup.endArray; } }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(ratio) { var target = this.target, a = this.a, i = a.length, mod = this._mod, e, val; if (mod) { while (--i > -1) { e = a[i]; target[e.i] = mod(e.s + e.c * ratio, target); } } else { while (--i > -1) { e = a[i]; val = e.s + e.c * ratio; target[e.i] = (val < 0.000001 && val > -0.000001) ? 0 : val; } } } }); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.0.2 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _cssRatioSetter = function(pt, cssp, mod) { //Takes an individual CSSPropTween and converts it into a type:2 that has a setRatio that does everything the regular CSSPlugin.setRatio() method does but applying the mod() too. We do this to keep the main CSSPlugin.setRatio() as fast as possible (the vast majority of times, no mod() will be necessary) var type = pt.type, oldSetRatio = pt.setRatio, tween = cssp._tween, target = cssp._target; pt.type = 2; pt.m = mod; pt.setRatio = function(v) { var min = 0.000001, val, str, i; if (v === 1 && (tween._time === tween._duration || tween._time === 0)) { if (type !== 2) { if (pt.r && type !== -1) { val = Math.round(pt.s + pt.c); if (!type) { pt.t[pt.p] = mod(val + pt.xs0, target); } else if (type === 1) { str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = mod(str, target); } } else { pt.t[pt.p] = mod(pt.e, target); } } else { oldSetRatio.call(pt, v); } } else if (v || !(tween._time === tween._duration || tween._time === 0) || tween._rawPrevTime === -0.000001) { val = pt.c * v + pt.s; if (pt.r) { val = Math.round(val); } else if (val < min) if (val > -min) { val = 0; } if (!type) { pt.t[pt.p] = mod(val + pt.xs0, target); } else if (type === 1) { str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = mod(str, target); } else if (type === -1) { //non-tweening value pt.t[pt.p] = mod(pt.xs0, target); } else if (oldSetRatio) { oldSetRatio.call(pt, v); } } else { if (type !== 2) { pt.t[pt.p] = mod(pt.b, target); } else { oldSetRatio.call(pt, v); } } }; }, _modCSS = function(lookup, cssp) { var pt = cssp._firstPT, hasBezier = (lookup.rotation && cssp._overwriteProps.join("").indexOf("bezier") !== -1); //when a Bezier tween is applying autoRotation, it's a very special case we need to handle differently. while (pt) { if (typeof(lookup[pt.p]) === "function") { _cssRatioSetter(pt, cssp, lookup[pt.p]); } else if (hasBezier && pt.n === "bezier" && pt.plugin._overwriteProps.join("").indexOf("rotation") !== -1) { pt.data.mod = lookup.rotation; } pt = pt._next; } }, ModifiersPlugin = _gsScope._gsDefine.plugin({ propName: "modifiers", version: "0.0.2", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { this._tween = tween; this._vars = value; return true; }, initAll: function() { var tween = this._tween, lookup = this._vars, mpt = this, pt = tween._firstPT, val, next; while (pt) { next = pt._next; //record here, because it may get removed val = lookup[pt.n]; if (pt.pg) { if (pt.t._propName === "css") { //handle CSSPlugin uniquely (for performance, due to the fact that the values almost always are a concatenation of numbers and strings, like suffixes, and we don't want to slow down the regular CSSPlugin setRatio() performance with conditional checks for if the value needs to be modded, so we pull any modding prop out and change it to a type:2 one that simply calls a setRatio() method where we encapsulate the modding and update all together. That way, it says in the main CSSProp linked list and just has some custom logic applied to it inside its setRatio()) _modCSS(lookup, pt.t); } else if (pt.t !== mpt) { //don't run modProps on modProps :) val = lookup[pt.t._propName]; pt.t._mod((typeof(val) === "object") ? val : lookup); } } else if (typeof(val) === "function") { if (pt.f === 2 && pt.t) { //a blob (text containing multiple numeric values) pt.t._applyPT.m = val; } else { this._add(pt.t, pt.p, pt.s, pt.c, val); //remove from linked list if (next) { next._prev = pt._prev; } if (pt._prev) { pt._prev._next = next; } else if (tween._firstPT === pt) { tween._firstPT = next; } pt._next = pt._prev = null; tween._propLookup[pt.n] = mpt; } } pt = next; } return false; } }), p = ModifiersPlugin.prototype; p._add = function(target, p, s, c, mod) { this._addTween(target, p, s, s + c, p, mod); this._overwriteProps.push(p); }; p = _gsScope._gsDefine.globals.TweenLite.version.split("."); Iif (Number(p[0]) <= 1 && Number(p[1]) < 19 && _gsScope.console) { console.log("ModifiersPlugin requires GSAP 1.19.0 or later."); } }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("ModifiersPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 | 1 1 1 1 1 | /*! * VERSION: 0.2.2 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _NaNExp = /[^\d\-\.]/g, _DEG2RAD = Math.PI / 180, _numExp = /(\d|\.)+/g, _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, //parses a color (like #9F0, #FF9900, or rgb(255,51,153)) into an array with 3 elements for red, green, and blue. Also handles rgba() values (splits into array of 4 elements of course) _parseColor = function(color) { if (typeof(color) === "number") { return [color >> 16, (color >> 8) & 255, color & 255]; } else if (color === "" || color == null || color === "none" || typeof(color) !== "string") { return _colorLookup.transparent; } else if (_colorLookup[color]) { return _colorLookup[color]; } else if (color.charAt(0) === "#") { if (color.length === 4) { //for shorthand like #9F0 color = "#" + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2) + color.charAt(3) + color.charAt(3); } color = parseInt(color.substr(1), 16); return [color >> 16, (color >> 8) & 255, color & 255]; } return color.match(_numExp) || _colorLookup.transparent; }, _transformMap = {scaleX:1, scaleY:1, tx:1, ty:1, rotation:1, shortRotation:1, skewX:1, skewY:1, scale:1}, //parses the transform values for an element, returning an object with x, y, scaleX, scaleY, rotation, skewX, and skewY properties. Note: by default (for performance reasons), all skewing is combined into skewX and rotation but skewY still has a place in the transform object so that we can record how much of the skew is attributed to skewX vs skewY. Remember, a skewY of 10 looks the same as a rotation of 10 and skewX of -10. _getTransform = function(t, rec) { var s = t.matrix, min = 0.000001, a = s.a, b = s.b, c = s.c, d = s.d, m = rec ? t._gsTransform || {skewY:0} : {skewY:0}, invX = (m.scaleX < 0); //in order to interpret things properly, we need to know if the user applied a negative scaleX previously so that we can adjust the rotation and skewX accordingly. Otherwise, if we always interpret a flipped matrix as affecting scaleY and the user only wants to tween the scaleX on multiple sequential tweens, it would keep the negative scaleY without that being the user's intent. m.tx = s.e - (m.ox || 0); //ox is the offset x that we record in setRatio() whenever we apply a custom transform that might use a pivot point. Remember, s.e and s.f get affected by things like scale. For example, imagine an object whose top left corner is at 100,100 and then we scale it up to 300% using the center as the pivot point - that corner would now be very different even though to the user, they didn't intend to change/tween the x/y position per se. Therefore, we record whatever offsets we make so that we can compensate when reading the values back. m.ty = s.f - (m.oy || 0); //oy is the offset y (see note above) m.scaleX = Math.sqrt(a * a + b * b); m.scaleY = Math.sqrt(d * d + c * c); m.rotation = (a || b) ? Math.atan2(b, a) : m.rotation || 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist). m.skewX = (c || d) ? Math.atan2(c, d) + m.rotation : m.skewX || 0; if (Math.abs(m.skewX) > Math.PI / 2) { if (invX) { m.scaleX *= -1; m.skewX += (m.rotation <= 0) ? Math.PI : -Math.PI; m.rotation += (m.rotation <= 0) ? Math.PI : -Math.PI; } else { m.scaleY *= -1; m.skewX += (m.skewX <= 0) ? Math.PI : -Math.PI; } } //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 0 in these cases. The conditional logic here is faster than calling Math.abs(). if (m.rotation < min) if (m.rotation > -min) if (a || b) { m.rotation = 0; } if (m.skewX < min) if (m.skewX > -min) if (b || c) { m.skewX = 0; } if (rec) { t._gsTransform = m; //record to the object's _gsTransform which we use so that tweens can control individual properties independently (we need all the properties to accurately recompose the matrix in the setRatio() method) } return m; }, //takes a value and a default number, checks if the value is relative, null, or numeric and spits back a normalized number accordingly. Primarily used in the _parseTransform() function. _parseVal = function(v, d) { return (v == null) ? d : (typeof(v) === "string" && v.indexOf("=") === 1) ? parseInt(v.charAt(0)+"1", 10) * Number(v.substr(2)) + d : Number(v); }, //translates strings like "40deg" or "40" or 40rad" or "+=40deg" to a numeric radian angle, optionally relative to a default value (if "+=" or "-=" prefix is found) _parseAngle = function(v, d) { var m = (v.indexOf("rad") === -1) ? _DEG2RAD : 1, r = (v.indexOf("=") === 1); v = Number(v.replace(_NaNExp, "")) * m; return r ? v + d : v; }, RaphaelPlugin = _gsScope._gsDefine.plugin({ propName: "raphael", version: "0.2.2", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { if (!target.attr) { //raphael must have attr() method return false; } this._target = target; this._tween = tween; this._props = target._gsProps = target._gsProps || {}; var p, s, v, pt, clr1, clr2, rel; for (p in value) { v = value[p]; if (p === "transform") { this._parseTransform(target, v); continue; } else if (_transformMap[p] || p === "pivot") { this._parseTransform(target, value); continue; } s = target.attr(p); //Some of these properties are in place in order to conform with the standard PropTweens in TweenPlugins so that overwriting and roundProps occur properly. For example, f and r may seem unnecessary here, but they enable other functionality. //_next:* next linked list node [object] //t: * target [object] //p: * property (camelCase) [string] //s: * starting value [number] //c: * change value [number] //f: * is function [boolean] //n: * name (for overwriting) [string] //b: beginning value [string] //i: intermediate value [string] //e: ending value [string] //r: * round [boolean] //type: 0=normal, 1=color, 2=rgba, -1=non-tweening prop [number] this._firstPT = pt = {_next:this._firstPT, t:this._props, p:p, b:s, f:false, n:"raphael_" + p, r:false, type:0}; //color values must be split apart into their R, G, B (and sometimes alpha) values and tweened independently. if (p === "fill" || p === "stroke") { clr1 = _parseColor(s); clr2 = _parseColor(v); pt.e = v; pt.s = Number(clr1[0]); //red starting value pt.c = Number(clr2[0]) - pt.s; //red change pt.gs = Number(clr1[1]); //green starting value pt.gc = Number(clr2[1]) - pt.gs; //green change pt.bs = Number(clr1[2]); //blue starting value pt.bc = Number(clr2[2]) - pt.bs; //blue change if (clr1.length > 3 || clr2.length > 3) { //detect an rgba() value pt.as = (clr1.length < 4) ? 1 : Number(clr1[3]); pt.ac = ((clr2.length < 4) ? 1 : Number(clr2[3])) - pt.as; pt.type = 2; //2 = rgba() tween } else { pt.type = 1; //1 = color tween, -1 = no tween, just set the value at the end because there's no changes } } else { s = (typeof(s) === "string") ? parseFloat(s.replace(_NaNExp, "")) : Number(s); if (typeof(v) === "string") { rel = (v.charAt(1) === "="); v = parseFloat(v.replace(_NaNExp, "")); } else { rel = false; } pt.e = (v || v === 0) ? (rel ? v + s : v) : value[p]; //ensures that any += or -= prefixes are taken care of. if ((s || s === 0) && (v || v === 0) && (pt.c = (rel ? v : v - s))) { //faster than isNaN(). Also, we set pt.c (change) here because if it's 0, we'll just treat it like a non-tweening value. can't do (v !== start) because if it's a relative value and the CHANGE is identical to the START, the condition will fail unnecessarily. pt.s = s; } else { pt.type = -1; pt.i = value[p]; //intermediate value is typically the same as the end value. pt.s = pt.c = 0; } } this._overwriteProps.push("raphael_" + p); if (pt._next) { pt._next._prev = pt; } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var pt = this._firstPT, val; while (pt) { val = pt.c * v + pt.s; if (pt.r) { val = Math.round(val); } if (!pt.type) { pt.t[pt.p] = val; } else if (pt.type === 1) { //rgb() pt.t[pt.p] = "rgb(" + (val >> 0) + ", " + ((pt.gs + (v * pt.gc)) >> 0) + ", " + ((pt.bs + (v * pt.bc)) >> 0) + ")"; } else if (pt.type === 2) { //rgba() pt.t[pt.p] = "rgba(" + (val >> 0) + ", " + ((pt.gs + (v * pt.gc)) >> 0) + ", " + ((pt.bs + (v * pt.bc)) >> 0) + ", " + (pt.as + (v * pt.ac)) + ")"; } else if (pt.type === -1) { //non-tweening pt.t[pt.p] = pt.i; } pt = pt._next; } this._target.attr(this._props); //apply transform values like x, y, scaleX, scaleY, rotation, skewX, or skewY. We do these after looping through all the PropTweens because those are where the changes are made to scaleX/scaleY/rotation/skewX/skewY/x/y. if (this._transform) { pt = this._transform; //to improve speed and reduce size, reuse the pt variable as an alias to the _transform property var ang = pt.rotation, skew = ang - pt.skewX, a = Math.cos(ang) * pt.scaleX, b = Math.sin(ang) * pt.scaleX, c = Math.sin(skew) * -pt.scaleY, d = Math.cos(skew) * pt.scaleY, min = 0.000001, pxl = this._pxl, pyl = this._pyl; //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 0 in these cases for both b and c. The conditional logic here is faster than calling Math.abs(). if (b < min) if (b > -min) { b = 0; } if (c < min) if (c > -min) { c = 0; } pt.ox = this._pxg - (pxl * a + pyl * c); //we must record the offset x/y that we're making from the regular tx/ty (matrix.e and f) so that we can correctly interpret positional data in _getTransform(). See note there on tx and ox. pt.oy = this._pyg - (pxl * b + pyl * d); this._target.transform("m" + a + "," + b + "," + c + "," + d + "," + (pt.tx + pt.ox) + "," + (pt.ty + pt.oy)); } } }), p = RaphaelPlugin.prototype; //compares the beginning x, y, scaleX, scaleY, rotation, and skewX properties with the ending ones and adds PropTweens accordingly wherever necessary. We must tween them individually (rather than just tweening the matrix values) so that elgant overwriting can occur, like if one tween is controlling scaleX, scaleY, and rotation and then another one starts mid-tween that is trying to control the scaleX only - this tween should continue tweening scaleY and rotation. p._parseTransform = function(t, v) { if (this._transform) { return; } //only need to parse the transform once, and only if the browser supports it. var m1 = this._transform = _getTransform(t, true), min = 0.000001, m2, skewY, p, pt, copy, dx, dy, mtx, pivot; if (typeof(v) === "object") { //for values like scaleX, scaleY, rotation, x, y, skewX, and skewY or transform:{...} (object) m2 = {scaleX:_parseVal((v.scaleX != null) ? v.scaleX : v.scale, m1.scaleX), scaleY:_parseVal((v.scaleY != null) ? v.scaleY : v.scale, m1.scaleY), tx:_parseVal(v.tx, m1.tx), ty:_parseVal(v.ty, m1.ty)}; if (v.shortRotation != null) { m2.rotation = (typeof(v.shortRotation) === "number") ? v.shortRotation * _DEG2RAD : _parseAngle(v.shortRotation, m1.rotation); var dif = (m2.rotation - m1.rotation) % (Math.PI * 2); if (dif !== dif % Math.PI) { dif += Math.PI * ((dif < 0) ? 2 : -2); } m2.rotation = m1.rotation + dif; } else { m2.rotation = (v.rotation == null) ? m1.rotation : (typeof(v.rotation) === "number") ? v.rotation * _DEG2RAD : _parseAngle(v.rotation, m1.rotation); } m2.skewX = (v.skewX == null) ? m1.skewX : (typeof(v.skewX) === "number") ? v.skewX * _DEG2RAD : _parseAngle(v.skewX, m1.skewX); //note: for performance reasons, we combine all skewing into the skewX and rotation values, ignoring skewY but we must still record it so that we can discern how much of the overall skew is attributed to skewX vs. skewY. Otherwise, if the skewY would always act relative (tween skewY to 10deg, for example, multiple times and if we always combine things into skewX, we can't remember that skewY was 10 from last time). Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of -10 degrees. m2.skewY = (v.skewY == null) ? m1.skewY : (typeof(v.skewY) === "number") ? v.skewY * _DEG2RAD : _parseAngle(v.skewY, m1.skewY); if ((skewY = m2.skewY - m1.skewY)) { m2.skewX += skewY; m2.rotation += skewY; } //don't allow rotation/skew values to be a SUPER small decimal because when they're translated back to strings for setting the css property, the browser reports them in a funky way, like 1-e7. Of course we could use toFixed() to resolve that issue but that hurts performance quite a bit with all those function calls on every frame, plus it is virtually impossible to discern values that small visually (nobody will notice changing a rotation of 0.0000001 to 0, so the performance improvement is well worth it). if (m2.skewY < min) if (m2.skewY > -min) { m2.skewY = 0; } if (m2.skewX < min) if (m2.skewX > -min) { m2.skewX = 0; } if (m2.rotation < min) if (m2.rotation > -min) { m2.rotation = 0; } pivot = v.localPivot || v.globalPivot; if (typeof(pivot) === "string") { copy = pivot.split(","); dx = Number(copy[0]); dy = Number(copy[1]); } else if (typeof(pivot) === "object") { dx = Number(pivot.x); dy = Number(pivot.y); } else if (v.localPivot) { copy = t.getBBox(true); dx = copy.width / 2; dy = copy.height / 2; } else { copy = t.getBBox(); dx = copy.x + copy.width / 2; dy = copy.y + copy.height / 2; } if (v.localPivot) { mtx = t.matrix; dx += t.attr("x"); dy += t.attr("y"); this._pxl = dx; this._pyl = dy; this._pxg = dx * mtx.a + dy * mtx.c + mtx.e - m1.tx; this._pyg = dx * mtx.b + dy * mtx.d + mtx.f - m1.ty; } else { mtx = t.matrix.invert(); this._pxl = dx * mtx.a + dy * mtx.c + mtx.e; this._pyl = dx * mtx.b + dy * mtx.d + mtx.f; this._pxg = dx - m1.tx; this._pyg = dy - m1.ty; } } else if (typeof(v) === "string") { //for values like transform:"rotate(60deg) scale(0.5, 0.8)" copy = this._target.transform(); t.transform(v); m2 = _getTransform(t, false); t.transform(copy); } else { return; } for (p in _transformMap) { if (m1[p] !== m2[p]) if (p !== "shortRotation") if (p !== "scale") { this._firstPT = pt = {_next:this._firstPT, t:m1, p:p, s:m1[p], c:m2[p] - m1[p], n:p, f:false, r:false, b:m1[p], e:m2[p], type:0}; if (pt._next) { pt._next._prev = pt; } this._overwriteProps.push("raphael_" + p); } } }; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1 1 1 1 1 1 | /*! * VERSION: 1.6.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var RoundPropsPlugin = _gsScope._gsDefine.plugin({ propName: "roundProps", version: "1.6.0", priority: -1, API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { this._tween = tween; return true; } }), _roundLinkedList = function(node) { while (node) { if (!node.f && !node.blob) { node.m = Math.round; } node = node._next; } }, p = RoundPropsPlugin.prototype; p._onInitAllProps = function() { var tween = this._tween, rp = (tween.vars.roundProps.join) ? tween.vars.roundProps : tween.vars.roundProps.split(","), i = rp.length, lookup = {}, rpt = tween._propLookup.roundProps, prop, pt, next; while (--i > -1) { lookup[rp[i]] = Math.round; } i = rp.length; while (--i > -1) { prop = rp[i]; pt = tween._firstPT; while (pt) { next = pt._next; //record here, because it may get removed if (pt.pg) { pt.t._mod(lookup); } else if (pt.n === prop) { if (pt.f === 2 && pt.t) { //a blob (text containing multiple numeric values) _roundLinkedList(pt.t._firstPT); } else { this._add(pt.t, prop, pt.s, pt.c); //remove from linked list if (next) { next._prev = pt._prev; } if (pt._prev) { pt._prev._next = next; } else if (tween._firstPT === pt) { tween._firstPT = next; } pt._next = pt._prev = null; tween._propLookup[prop] = rpt; } } pt = next; } } return false; }; p._add = function(target, p, s, c) { this._addTween(target, p, s, s + c, p, Math.round); this._overwriteProps.push(p); }; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | 2 2 2 2 | /*! * VERSION: 1.8.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _doc = document.documentElement, _window = _gsScope, _max = function(element, axis) { var dim = (axis === "x") ? "Width" : "Height", scroll = "scroll" + dim, client = "client" + dim, body = document.body; return (element === _window || element === _doc || element === body) ? Math.max(_doc[scroll], body[scroll]) - (_window["inner" + dim] || _doc[client] || body[client]) : element[scroll] - element["offset" + dim]; }, _unwrapElement = function(value) { if (typeof(value) === "string") { value = TweenLite.selector(value); } if (value.length && value !== _window && value[0] && value[0].style && !value.nodeType) { value = value[0]; } return (value === _window || (value.nodeType && value.style)) ? value : null; }, _buildGetter = function(e, axis) { //pass in an element and an axis ("x" or "y") and it'll return a getter function for the scroll position of that element (like scrollTop or scrollLeft, although if the element is the window, it'll use the pageXOffset/pageYOffset or the documentElement's scrollTop/scrollLeft or document.body's. Basically this streamlines things and makes a very fast getter across browsers. var p = "scroll" + ((axis === "x") ? "Left" : "Top"); if (e === _window) { if (e.pageXOffset != null) { p = "page" + axis.toUpperCase() + "Offset"; } else if (_doc[p] != null) { e = _doc; } else { e = document.body; } } return function() { return e[p]; }; }, _getOffset = function(element, container) { var rect = _unwrapElement(element).getBoundingClientRect(), isRoot = (!container || container === _window || container === document.body), cRect = (isRoot ? _doc : container).getBoundingClientRect(), offsets = {x: rect.left - cRect.left, y: rect.top - cRect.top}; if (!isRoot && container) { //only add the current scroll position if it's not the window/body. offsets.x += _buildGetter(container, "x")(); offsets.y += _buildGetter(container, "y")(); } return offsets; }, _parseVal = function(value, target, axis) { var type = typeof(value); if (type === "number" || (type === "string" && value.charAt(1) === "=")) { return value; } else if (value === "max") { return _max(target, axis); } return Math.min(_max(target, axis), _getOffset(value, target)[axis]); }, ScrollToPlugin = _gsScope._gsDefine.plugin({ propName: "scrollTo", API: 2, global: true, version:"1.8.1", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { this._wdw = (target === _window); this._target = target; this._tween = tween; if (typeof(value) !== "object") { value = {y:value}; //if we don't receive an object as the parameter, assume the user intends "y". if (typeof(value.y) === "string" && value.y !== "max" && value.y.charAt(1) !== "=") { value.x = value.y; } } else if (value.nodeType) { value = {y:value, x:value}; } this.vars = value; this._autoKill = (value.autoKill !== false); this.getX = _buildGetter(target, "x"); this.getY = _buildGetter(target, "y"); this.x = this.xPrev = this.getX(); this.y = this.yPrev = this.getY(); if (value.x != null) { this._addTween(this, "x", this.x, _parseVal(value.x, target, "x") - (value.offsetX || 0), "scrollTo_x", true); this._overwriteProps.push("scrollTo_x"); } else { this.skipX = true; } if (value.y != null) { this._addTween(this, "y", this.y, _parseVal(value.y, target, "y") - (value.offsetY || 0), "scrollTo_y", true); this._overwriteProps.push("scrollTo_y"); } else { this.skipY = true; } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { this._super.setRatio.call(this, v); var x = (this._wdw || !this.skipX) ? this.getX() : this.xPrev, y = (this._wdw || !this.skipY) ? this.getY() : this.yPrev, yDif = y - this.yPrev, xDif = x - this.xPrev, threshold = ScrollToPlugin.autoKillThreshold; if (this.x < 0) { //can't scroll to a position less than 0! Might happen if someone uses a Back.easeOut or Elastic.easeOut when scrolling back to the top of the page (for example) this.x = 0; } if (this.y < 0) { this.y = 0; } if (this._autoKill) { //note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match. if (!this.skipX && (xDif > threshold || xDif < -threshold) && x < _max(this._target, "x")) { this.skipX = true; //if the user scrolls separately, we should stop tweening! } if (!this.skipY && (yDif > threshold || yDif < -threshold) && y < _max(this._target, "y")) { this.skipY = true; //if the user scrolls separately, we should stop tweening! } if (this.skipX && this.skipY) { this._tween.kill(); if (this.vars.onAutoKill) { this.vars.onAutoKill.apply(this.vars.onAutoKillScope || this._tween, this.vars.onAutoKillParams || []); } } } if (this._wdw) { _window.scrollTo((!this.skipX) ? this.x : x, (!this.skipY) ? this.y : y); } else { if (!this.skipY) { this._target.scrollTop = this.y; } if (!this.skipX) { this._target.scrollLeft = this.x; } } this.xPrev = this.x; this.yPrev = this.y; } }), p = ScrollToPlugin.prototype; ScrollToPlugin.max = _max; ScrollToPlugin.getOffset = _getOffset; ScrollToPlugin.autoKillThreshold = 7; p._kill = function(lookup) { if (lookup.scrollTo_x) { this.skipX = true; } if (lookup.scrollTo_y) { this.skipY = true; } return this._super._kill.call(this, lookup); }; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("ScrollToPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.5.2 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _getText = function(e) { var type = e.nodeType, result = ""; if (type === 1 || type === 9 || type === 11) { if (typeof(e.textContent) === "string") { return e.textContent; } else { for ( e = e.firstChild; e; e = e.nextSibling ) { result += _getText(e); } } } else if (type === 3 || type === 4) { return e.nodeValue; } return result; }, TextPlugin = _gsScope._gsDefine.plugin({ propName: "text", API: 2, version:"0.5.2", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var i = target.nodeName.toUpperCase(), shrt; if (typeof(value) === "function") { value = value(index, target); } this._svg = (target.getBBox && (i === "TEXT" || i === "TSPAN")); if (!("innerHTML" in target) && !this._svg) { return false; } this._target = target; if (typeof(value) !== "object") { value = {value:value}; } if (value.value === undefined) { this._text = this._original = [""]; return true; } this._delimiter = value.delimiter || ""; this._original = _getText(target).replace(/\s+/g, " ").split(this._delimiter); this._text = value.value.replace(/\s+/g, " ").split(this._delimiter); this._runBackwards = (tween.vars.runBackwards === true); if (this._runBackwards) { i = this._original; this._original = this._text; this._text = i; } if (typeof(value.newClass) === "string") { this._newClass = value.newClass; this._hasClass = true; } if (typeof(value.oldClass) === "string") { this._oldClass = value.oldClass; this._hasClass = true; } i = this._original.length - this._text.length; shrt = (i < 0) ? this._original : this._text; this._fillChar = value.fillChar || (value.padSpace ? " " : ""); if (i < 0) { i = -i; } while (--i > -1) { shrt.push(this._fillChar); } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(ratio) { if (ratio > 1) { ratio = 1; } else if (ratio < 0) { ratio = 0; } if (this._runBackwards) { ratio = 1 - ratio; } var l = this._text.length, i = (ratio * l + 0.5) | 0, applyNew, applyOld, str; if (this._hasClass) { applyNew = (this._newClass && i !== 0); applyOld = (this._oldClass && i !== l); str = (applyNew ? "<span class='" + this._newClass + "'>" : "") + this._text.slice(0, i).join(this._delimiter) + (applyNew ? "</span>" : "") + (applyOld ? "<span class='" + this._oldClass + "'>" : "") + this._delimiter + this._original.slice(i).join(this._delimiter) + (applyOld ? "</span>" : ""); } else { str = this._text.slice(0, i).join(this._delimiter) + this._delimiter + this._original.slice(i).join(this._delimiter); } if (this._svg) { //SVG text elements don't have an "innerHTML" in Microsoft browsers. this._target.textContent = str; } else { this._target.innerHTML = (this._fillChar === " " && str.indexOf(" ") !== -1) ? str.split(" ").join(" ") : str; } } }), p = TextPlugin.prototype; p._newClass = p._oldClass = p._delimiter = ""; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); module.exports = getGlobal(); } }("TextPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 1.19.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) { var TimelineLite = function(vars) { SimpleTimeline.call(this, vars); this._labels = {}; this.autoRemoveChildren = (this.vars.autoRemoveChildren === true); this.smoothChildTiming = (this.vars.smoothChildTiming === true); this._sortChildren = true; this._onUpdate = this.vars.onUpdate; var v = this.vars, val, p; for (p in v) { val = v[p]; if (_isArray(val)) if (val.join("").indexOf("{self}") !== -1) { v[p] = this._swapSelfInParams(val); } } Iif (_isArray(v.tweens)) { this.add(v.tweens, 0, v.align, v.stagger); } }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _internals = TimelineLite._internals = {}, _isSelector = TweenLiteInternals.isSelector, _isArray = TweenLiteInternals.isArray, _lazyTweens = TweenLiteInternals.lazyTweens, _lazyRender = TweenLiteInternals.lazyRender, _globals = _gsScope._gsDefine.globals, _copy = function(vars) { var copy = {}, p; for (p in vars) { copy[p] = vars[p]; } return copy; }, _applyCycle = function(vars, targets, i) { var alt = vars.cycle, p, val; for (p in alt) { val = alt[p]; vars[p] = (typeof(val) === "function") ? val(i, targets[i]) : val[i % val.length]; } delete vars.cycle; }, _pauseCallback = _internals.pauseCallback = function() {}, _slice = function(a) { //don't use [].slice because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, p = TimelineLite.prototype = new SimpleTimeline(); TimelineLite.version = "1.19.1"; p.constructor = TimelineLite; p.kill()._gc = p._forcingPlayhead = p._hasPause = false; /* might use later... //translates a local time inside an animation to the corresponding time on the root/global timeline, factoring in all nesting and timeScales. function localToGlobal(time, animation) { while (animation) { time = (time / animation._timeScale) + animation._startTime; animation = animation.timeline; } return time; } //translates the supplied time on the root/global timeline into the corresponding local time inside a particular animation, factoring in all nesting and timeScales function globalToLocal(time, animation) { var scale = 1; time -= localToGlobal(0, animation); while (animation) { scale *= animation._timeScale; animation = animation.timeline; } return time * scale; } */ p.to = function(target, duration, vars, position) { var Engine = (vars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( new Engine(target, duration, vars), position) : this.set(target, vars, position); }; p.from = function(target, duration, vars, position) { return this.add( ((vars.repeat && _globals.TweenMax) || TweenLite).from(target, duration, vars), position); }; p.fromTo = function(target, duration, fromVars, toVars, position) { var Engine = (toVars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( Engine.fromTo(target, duration, fromVars, toVars), position) : this.set(target, toVars, position); }; p.staggerTo = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { var tl = new TimelineLite({onComplete:onCompleteAll, onCompleteParams:onCompleteAllParams, callbackScope:onCompleteAllScope, smoothChildTiming:this.smoothChildTiming}), cycle = vars.cycle, copy, i; if (typeof(targets) === "string") { targets = TweenLite.selector(targets) || targets; } targets = targets || []; if (_isSelector(targets)) { //senses if the targets object is a selector. If it is, we should translate it into an array. targets = _slice(targets); } stagger = stagger || 0; if (stagger < 0) { targets = _slice(targets); targets.reverse(); stagger *= -1; } for (i = 0; i < targets.length; i++) { copy = _copy(vars); if (copy.startAt) { copy.startAt = _copy(copy.startAt); if (copy.startAt.cycle) { _applyCycle(copy.startAt, targets, i); } } if (cycle) { _applyCycle(copy, targets, i); if (copy.duration != null) { duration = copy.duration; delete copy.duration; } } tl.to(targets[i], duration, copy, i * stagger); } return this.add(tl, position); }; p.staggerFrom = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { vars.immediateRender = (vars.immediateRender != false); vars.runBackwards = true; return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.staggerFromTo = function(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.call = function(callback, params, scope, position) { return this.add( TweenLite.delayedCall(0, callback, params, scope), position); }; p.set = function(target, vars, position) { position = this._parseTimeOrLabel(position, 0, true); if (vars.immediateRender == null) { vars.immediateRender = (position === this._time && !this._paused); } return this.add( new TweenLite(target, 0, vars), position); }; TimelineLite.exportRoot = function(vars, ignoreDelayedCalls) { vars = vars || {}; if (vars.smoothChildTiming == null) { vars.smoothChildTiming = true; } var tl = new TimelineLite(vars), root = tl._timeline, tween, next; if (ignoreDelayedCalls == null) { ignoreDelayedCalls = true; } root._remove(tl, true); tl._startTime = 0; tl._rawPrevTime = tl._time = tl._totalTime = root._time; tween = root._first; while (tween) { next = tween._next; if (!ignoreDelayedCalls || !(tween instanceof TweenLite && tween.target === tween.vars.onComplete)) { tl.add(tween, tween._startTime - tween._delay); } tween = next; } root.add(tl, 0); return tl; }; p.add = function(value, position, align, stagger) { var curTime, l, i, child, tl, beforeRawTime; if (typeof(position) !== "number") { position = this._parseTimeOrLabel(position, 0, true, value); } if (!(value instanceof Animation)) { if ((value instanceof Array) || (value && value.push && _isArray(value))) { align = align || "normal"; stagger = stagger || 0; curTime = position; l = value.length; for (i = 0; i < l; i++) { if (_isArray(child = value[i])) { child = new TimelineLite({tweens:child}); } this.add(child, curTime); if (typeof(child) !== "string" && typeof(child) !== "function") { if (align === "sequence") { curTime = child._startTime + (child.totalDuration() / child._timeScale); } else if (align === "start") { child._startTime -= child.delay(); } } curTime += stagger; } return this._uncache(true); } else if (typeof(value) === "string") { return this.addLabel(value, position); } else if (typeof(value) === "function") { value = TweenLite.delayedCall(0, value); } else { throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string."); } } SimpleTimeline.prototype.add.call(this, value, position); //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate. if (this._gc || this._time === this._duration) if (!this._paused) if (this._duration < this.duration()) { //in case any of the ancestors had completed but should now be enabled... tl = this; beforeRawTime = (tl.rawTime() > value._startTime); //if the tween is placed on the timeline so that it starts BEFORE the current rawTime, we should align the playhead (move the timeline). This is because sometimes users will create a timeline, let it finish, and much later append a tween and expect it to run instead of jumping to its end state. While technically one could argue that it should jump to its end state, that's not what users intuitively expect. while (tl._timeline) { if (beforeRawTime && tl._timeline.smoothChildTiming) { tl.totalTime(tl._totalTime, true); //moves the timeline (shifts its startTime) if necessary, and also enables it. } else if (tl._gc) { tl._enabled(true, false); } tl = tl._timeline; } } return this; }; p.remove = function(value) { if (value instanceof Animation) { this._remove(value, false); var tl = value._timeline = value.vars.useFrames ? Animation._rootFramesTimeline : Animation._rootTimeline; //now that it's removed, default it to the root timeline so that if it gets played again, it doesn't jump back into this timeline. value._startTime = (value._paused ? value._pauseTime : tl._time) - ((!value._reversed ? value._totalTime : value.totalDuration() - value._totalTime) / value._timeScale); //ensure that if it gets played again, the timing is correct. return this; } else if (value instanceof Array || (value && value.push && _isArray(value))) { var i = value.length; while (--i > -1) { this.remove(value[i]); } return this; } else if (typeof(value) === "string") { return this.removeLabel(value); } return this.kill(null, value); }; p._remove = function(tween, skipDisable) { SimpleTimeline.prototype._remove.call(this, tween, skipDisable); var last = this._last; if (!last) { this._time = this._totalTime = this._duration = this._totalDuration = 0; } else if (this._time > this.duration()) { this._time = this._duration; this._totalTime = this._totalDuration; } return this; }; p.append = function(value, offsetOrLabel) { return this.add(value, this._parseTimeOrLabel(null, offsetOrLabel, true, value)); }; p.insert = p.insertMultiple = function(value, position, align, stagger) { return this.add(value, position || 0, align, stagger); }; p.appendMultiple = function(tweens, offsetOrLabel, align, stagger) { return this.add(tweens, this._parseTimeOrLabel(null, offsetOrLabel, true, tweens), align, stagger); }; p.addLabel = function(label, position) { this._labels[label] = this._parseTimeOrLabel(position); return this; }; p.addPause = function(position, callback, params, scope) { var t = TweenLite.delayedCall(0, _pauseCallback, params, scope || this); t.vars.onComplete = t.vars.onReverseComplete = callback; t.data = "isPause"; this._hasPause = true; return this.add(t, position); }; p.removeLabel = function(label) { delete this._labels[label]; return this; }; p.getLabelTime = function(label) { return (this._labels[label] != null) ? this._labels[label] : -1; }; p._parseTimeOrLabel = function(timeOrLabel, offsetOrLabel, appendIfAbsent, ignore) { var i; //if we're about to add a tween/timeline (or an array of them) that's already a child of this timeline, we should remove it first so that it doesn't contaminate the duration(). if (ignore instanceof Animation && ignore.timeline === this) { this.remove(ignore); } else if (ignore && ((ignore instanceof Array) || (ignore.push && _isArray(ignore)))) { i = ignore.length; while (--i > -1) { if (ignore[i] instanceof Animation && ignore[i].timeline === this) { this.remove(ignore[i]); } } } if (typeof(offsetOrLabel) === "string") { return this._parseTimeOrLabel(offsetOrLabel, (appendIfAbsent && typeof(timeOrLabel) === "number" && this._labels[offsetOrLabel] == null) ? timeOrLabel - this.duration() : 0, appendIfAbsent); } offsetOrLabel = offsetOrLabel || 0; if (typeof(timeOrLabel) === "string" && (isNaN(timeOrLabel) || this._labels[timeOrLabel] != null)) { //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value). i = timeOrLabel.indexOf("="); if (i === -1) { if (this._labels[timeOrLabel] == null) { return appendIfAbsent ? (this._labels[timeOrLabel] = this.duration() + offsetOrLabel) : offsetOrLabel; } return this._labels[timeOrLabel] + offsetOrLabel; } offsetOrLabel = parseInt(timeOrLabel.charAt(i-1) + "1", 10) * Number(timeOrLabel.substr(i+1)); timeOrLabel = (i > 1) ? this._parseTimeOrLabel(timeOrLabel.substr(0, i-1), 0, appendIfAbsent) : this.duration(); } else if (timeOrLabel == null) { timeOrLabel = this.duration(); } return Number(timeOrLabel) + offsetOrLabel; }; p.seek = function(position, suppressEvents) { return this.totalTime((typeof(position) === "number") ? position : this._parseTimeOrLabel(position), (suppressEvents !== false)); }; p.stop = function() { return this.paused(true); }; p.gotoAndPlay = function(position, suppressEvents) { return this.play(position, suppressEvents); }; p.gotoAndStop = function(position, suppressEvents) { return this.pause(position, suppressEvents); }; p.render = function(time, suppressEvents, force) { if (this._gc) { this._enabled(true, false); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), prevTime = this._time, prevStart = this._startTime, prevTimeScale = this._timeScale, prevPaused = this._paused, tween, isComplete, next, callback, internalForce, pauseTween, curTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = this._time = totalDur; if (!this._reversed) if (!this._hasPausedChild()) { isComplete = true; callback = "onComplete"; internalForce = !!this._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. if (this._duration === 0) if ((time <= 0 && time >= -0.0000001) || this._rawPrevTime < 0 || this._rawPrevTime === _tinyNum) if (this._rawPrevTime !== time && this._first) { internalForce = true; if (this._rawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } } this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. time = totalDur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = 0; if (prevTime !== 0 || (this._duration === 0 && this._rawPrevTime !== _tinyNum && (this._rawPrevTime > 0 || (time < 0 && this._rawPrevTime >= 0)))) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (this._timeline.autoRemoveChildren && this._reversed) { //ensures proper GC if a timeline is resumed after it's finished reversing. internalForce = isComplete = true; callback = "onReverseComplete"; } else if (this._rawPrevTime >= 0 && this._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state. internalForce = true; } this._rawPrevTime = time; } else { this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good). tween = this._first; while (tween && tween._startTime === 0) { if (!tween._duration) { isComplete = false; } tween = tween._next; } } time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline) if (!this._initted) { internalForce = true; } } } else { if (this._hasPause && !this._forcingPlayhead && !suppressEvents) { if (time >= prevTime) { tween = this._first; while (tween && tween._startTime <= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && this._rawPrevTime === 0)) { pauseTween = tween; } tween = tween._next; } } else { tween = this._last; while (tween && tween._startTime >= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) { pauseTween = tween; } tween = tween._prev; } } if (pauseTween) { this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } } this._totalTime = this._time = this._rawPrevTime = time; } if ((this._time === prevTime || !this._first) && !force && !internalForce && !pauseTween) { return; } else if (!this._initted) { this._initted = true; } if (!this._active) if (!this._paused && this._time !== prevTime && time > 0) { this._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example. } if (prevTime === 0) if (this.vars.onStart) if (this._time !== 0 || !this._duration) if (!suppressEvents) { this._callback("onStart"); } curTime = this._time; if (curTime >= prevTime) { tween = this._first; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= curTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } else { tween = this._last; while (tween) { next = tween._prev; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse. while (pauseTween && pauseTween.endTime() > this._time) { pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force); pauseTween = pauseTween._prev; } pauseTween = null; this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } if (this._onUpdate) if (!suppressEvents) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values. _lazyRender(); } this._callback("onUpdate"); } if (callback) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate if (isComplete) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values. _lazyRender(); } if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } } }; p._hasPausedChild = function() { var tween = this._first; while (tween) { if (tween._paused || ((tween instanceof TimelineLite) && tween._hasPausedChild())) { return true; } tween = tween._next; } return false; }; p.getChildren = function(nested, tweens, timelines, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || -9999999999; var a = [], tween = this._first, cnt = 0; while (tween) { if (tween._startTime < ignoreBeforeTime) { //do nothing } else if (tween instanceof TweenLite) { if (tweens !== false) { a[cnt++] = tween; } } else { if (timelines !== false) { a[cnt++] = tween; } if (nested !== false) { a = a.concat(tween.getChildren(true, tweens, timelines)); cnt = a.length; } } tween = tween._next; } return a; }; p.getTweensOf = function(target, nested) { var disabled = this._gc, a = [], cnt = 0, tweens, i; if (disabled) { this._enabled(true, true); //getTweensOf() filters out disabled tweens, and we have to mark them as _gc = true when the timeline completes in order to allow clean garbage collection, so temporarily re-enable the timeline here. } tweens = TweenLite.getTweensOf(target); i = tweens.length; while (--i > -1) { if (tweens[i].timeline === this || (nested && this._contains(tweens[i]))) { a[cnt++] = tweens[i]; } } if (disabled) { this._enabled(false, true); } return a; }; p.recent = function() { return this._recent; }; p._contains = function(tween) { var tl = tween.timeline; while (tl) { if (tl === this) { return true; } tl = tl.timeline; } return false; }; p.shiftChildren = function(amount, adjustLabels, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || 0; var tween = this._first, labels = this._labels, p; while (tween) { if (tween._startTime >= ignoreBeforeTime) { tween._startTime += amount; } tween = tween._next; } if (adjustLabels) { for (p in labels) { if (labels[p] >= ignoreBeforeTime) { labels[p] += amount; } } } return this._uncache(true); }; p._kill = function(vars, target) { Eif (!vars && !target) { return this._enabled(false, false); } var tweens = (!target) ? this.getChildren(true, true, false) : this.getTweensOf(target), i = tweens.length, changed = false; while (--i > -1) { if (tweens[i]._kill(vars, target)) { changed = true; } } return changed; }; p.clear = function(labels) { var tweens = this.getChildren(false, true, true), i = tweens.length; this._time = this._totalTime = 0; while (--i > -1) { tweens[i]._enabled(false, false); } if (labels !== false) { this._labels = {}; } return this._uncache(true); }; p.invalidate = function() { var tween = this._first; while (tween) { tween.invalidate(); tween = tween._next; } return Animation.prototype.invalidate.call(this);; }; p._enabled = function(enabled, ignoreTimeline) { Eif (enabled === this._gc) { var tween = this._first; while (tween) { tween._enabled(enabled, true); tween = tween._next; } } return SimpleTimeline.prototype._enabled.call(this, enabled, ignoreTimeline); }; p.totalTime = function(time, suppressEvents, uncapped) { this._forcingPlayhead = true; var val = Animation.prototype.totalTime.apply(this, arguments); this._forcingPlayhead = false; return val; }; p.duration = function(value) { if (!arguments.length) { if (this._dirty) { this.totalDuration(); //just triggers recalculation } return this._duration; } if (this.duration() !== 0 && value !== 0) { this.timeScale(this._duration / value); } return this; }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { var max = 0, tween = this._last, prevStart = 999999999999, prev, end; while (tween) { prev = tween._prev; //record it here in case the tween changes position in the sequence... if (tween._dirty) { tween.totalDuration(); //could change the tween._startTime, so make sure the tween's cache is clean before analyzing it. } if (tween._startTime > prevStart && this._sortChildren && !tween._paused) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence this.add(tween, tween._startTime - tween._delay); } else { prevStart = tween._startTime; } if (tween._startTime < 0 && !tween._paused) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found. max -= tween._startTime; if (this._timeline.smoothChildTiming) { this._startTime += tween._startTime / this._timeScale; } this.shiftChildren(-tween._startTime, false, -9999999999); prevStart = 0; } end = tween._startTime + (tween._totalDuration / tween._timeScale); if (end > max) { max = end; } tween = prev; } this._duration = this._totalDuration = max; this._dirty = false; } return this._totalDuration; } return (value && this.totalDuration()) ? this.timeScale(this._totalDuration / value) : this; }; p.paused = function(value) { if (!value) { //if there's a pause directly at the spot from where we're unpausing, skip it. var tween = this._first, time = this._time; while (tween) { if (tween._startTime === time && tween.data === "isPause") { tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire. } tween = tween._next; } } return Animation.prototype.paused.apply(this, arguments); }; p.usesFrames = function() { var tl = this._timeline; while (tl._timeline) { tl = tl._timeline; } return (tl === Animation._rootFramesTimeline); }; p.rawTime = function(wrapRepeats) { return (wrapRepeats && (this._paused || (this._repeat && this.time() > 0 && this.totalProgress() < 1))) ? this._totalTime % (this._duration + this._repeatDelay) : this._paused ? this._totalTime : (this._timeline.rawTime(wrapRepeats) - this._startTime) * this._timeScale; }; return TimelineLite; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); //dependency module.exports = getGlobal(); } }("TimelineLite")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 1.19.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], function(TimelineLite, TweenLite, Ease) { var TimelineMax = function(vars) { TimelineLite.call(this, vars); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._cycle = 0; this._yoyo = (this.vars.yoyo === true); this._dirty = true; }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _lazyTweens = TweenLiteInternals.lazyTweens, _lazyRender = TweenLiteInternals.lazyRender, _globals = _gsScope._gsDefine.globals, _easeNone = new Ease(null, null, 1, 0), p = TimelineMax.prototype = new TimelineLite(); p.constructor = TimelineMax; p.kill()._gc = false; TimelineMax.version = "1.19.1"; p.invalidate = function() { this._yoyo = (this.vars.yoyo === true); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._uncache(true); return TimelineLite.prototype.invalidate.call(this); }; p.addCallback = function(callback, position, params, scope) { return this.add( TweenLite.delayedCall(0, callback, params, scope), position); }; p.removeCallback = function(callback, position) { if (callback) { if (position == null) { this._kill(null, callback); } else { var a = this.getTweensOf(callback, false), i = a.length, time = this._parseTimeOrLabel(position); while (--i > -1) { if (a[i]._startTime === time) { a[i]._enabled(false, false); } } } } return this; }; p.removePause = function(position) { return this.removeCallback(TimelineLite._internals.pauseCallback, position); }; p.tweenTo = function(position, vars) { vars = vars || {}; var copy = {ease:_easeNone, useFrames:this.usesFrames(), immediateRender:false}, Engine = (vars.repeat && _globals.TweenMax) || TweenLite, duration, p, t; for (p in vars) { copy[p] = vars[p]; } copy.time = this._parseTimeOrLabel(position); duration = (Math.abs(Number(copy.time) - this._time) / this._timeScale) || 0.001; t = new Engine(this, duration, copy); copy.onStart = function() { t.target.paused(true); if (t.vars.time !== t.target.time() && duration === t.duration()) { //don't make the duration zero - if it's supposed to be zero, don't worry because it's already initting the tween and will complete immediately, effectively making the duration zero anyway. If we make duration zero, the tween won't run at all. t.duration( Math.abs( t.vars.time - t.target.time()) / t.target._timeScale ); } if (vars.onStart) { //in case the user had an onStart in the vars - we don't want to overwrite it. vars.onStart.apply(vars.onStartScope || vars.callbackScope || t, vars.onStartParams || []); //don't use t._callback("onStart") or it'll point to the copy.onStart and we'll get a recursion error. } }; return t; }; p.tweenFromTo = function(fromPosition, toPosition, vars) { vars = vars || {}; fromPosition = this._parseTimeOrLabel(fromPosition); vars.startAt = {onComplete:this.seek, onCompleteParams:[fromPosition], callbackScope:this}; vars.immediateRender = (vars.immediateRender !== false); var t = this.tweenTo(toPosition, vars); return t.duration((Math.abs( t.vars.time - fromPosition) / this._timeScale) || 0.001); }; p.render = function(time, suppressEvents, force) { if (this._gc) { this._enabled(true, false); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), dur = this._duration, prevTime = this._time, prevTotalTime = this._totalTime, prevStart = this._startTime, prevTimeScale = this._timeScale, prevRawPrevTime = this._rawPrevTime, prevPaused = this._paused, prevCycle = this._cycle, tween, isComplete, next, callback, internalForce, cycleDuration, pauseTween, curTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. if (!this._locked) { this._totalTime = totalDur; this._cycle = this._repeat; } if (!this._reversed) if (!this._hasPausedChild()) { isComplete = true; callback = "onComplete"; internalForce = !!this._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. if (this._duration === 0) if ((time <= 0 && time >= -0.0000001) || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time && this._first) { internalForce = true; if (prevRawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } } this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (this._yoyo && (this._cycle & 1) !== 0) { this._time = time = 0; } else { this._time = dur; time = dur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. We cannot do less then 0.0001 because the same issue can occur when the duration is extremely large like 999999999999 in which case adding 0.00000001, for example, causes it to act like nothing was added. } } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. if (!this._locked) { this._totalTime = this._cycle = 0; } this._time = 0; if (prevTime !== 0 || (dur === 0 && prevRawPrevTime !== _tinyNum && (prevRawPrevTime > 0 || (time < 0 && prevRawPrevTime >= 0)) && !this._locked)) { //edge case for checking time < 0 && prevRawPrevTime >= 0: a zero-duration fromTo() tween inside a zero-duration timeline (yeah, very rare) callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (this._timeline.autoRemoveChildren && this._reversed) { internalForce = isComplete = true; callback = "onReverseComplete"; } else if (prevRawPrevTime >= 0 && this._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state. internalForce = true; } this._rawPrevTime = time; } else { this._rawPrevTime = (dur || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good). tween = this._first; while (tween && tween._startTime === 0) { if (!tween._duration) { isComplete = false; } tween = tween._next; } } time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline) if (!this._initted) { internalForce = true; } } } else { if (dur === 0 && prevRawPrevTime < 0) { //without this, zero-duration repeating timelines (like with a simple callback nested at the very beginning and a repeatDelay) wouldn't render the first time through. internalForce = true; } this._time = this._rawPrevTime = time; if (!this._locked) { this._totalTime = time; if (this._repeat !== 0) { cycleDuration = dur + this._repeatDelay; this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but it gets reported as 0.79999999!) if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration && prevTotalTime <= time) { this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning) } this._time = this._totalTime - (this._cycle * cycleDuration); if (this._yoyo) if ((this._cycle & 1) !== 0) { this._time = dur - this._time; } if (this._time > dur) { this._time = dur; time = dur + 0.0001; //to avoid occasional floating point rounding error } else if (this._time < 0) { this._time = time = 0; } else { time = this._time; } } } if (this._hasPause && !this._forcingPlayhead && !suppressEvents && time < dur) { time = this._time; if (time >= prevTime || (this._repeat && prevCycle !== this._cycle)) { tween = this._first; while (tween && tween._startTime <= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && this._rawPrevTime === 0)) { pauseTween = tween; } tween = tween._next; } } else { tween = this._last; while (tween && tween._startTime >= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) { pauseTween = tween; } tween = tween._prev; } } if (pauseTween) { this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } } } if (this._cycle !== prevCycle) if (!this._locked) { /* make sure children at the end/beginning of the timeline are rendered properly. If, for example, a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which would get transated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must ensure that zero-duration tweens at the very beginning or end of the TimelineMax work. */ var backwards = (this._yoyo && (prevCycle & 1) !== 0), wrap = (backwards === (this._yoyo && (this._cycle & 1) !== 0)), recTotalTime = this._totalTime, recCycle = this._cycle, recRawPrevTime = this._rawPrevTime, recTime = this._time; this._totalTime = prevCycle * dur; if (this._cycle < prevCycle) { backwards = !backwards; } else { this._totalTime += dur; } this._time = prevTime; //temporarily revert _time so that render() renders the children in the correct order. Without this, tweens won't rewind correctly. We could arhictect things in a "cleaner" way by splitting out the rendering queue into a separate method but for performance reasons, we kept it all inside this method. this._rawPrevTime = (dur === 0) ? prevRawPrevTime - 0.0001 : prevRawPrevTime; this._cycle = prevCycle; this._locked = true; //prevents changes to totalTime and skips repeat/yoyo behavior when we recursively call render() prevTime = (backwards) ? 0 : dur; this.render(prevTime, suppressEvents, (dur === 0)); if (!suppressEvents) if (!this._gc) { if (this.vars.onRepeat) { this._cycle = recCycle; //in case the onRepeat alters the playhead or invalidates(), we shouldn't stay locked or use the previous cycle. this._locked = false; this._callback("onRepeat"); } } if (prevTime !== this._time) { //in case there's a callback like onComplete in a nested tween/timeline that changes the playhead position, like via seek(), we should just abort. return; } if (wrap) { this._cycle = prevCycle; //if there's an onRepeat, we reverted this above, so make sure it's set properly again. We also unlocked in that scenario, so reset that too. this._locked = true; prevTime = (backwards) ? dur + 0.0001 : -0.0001; this.render(prevTime, true, false); } this._locked = false; if (this._paused && !prevPaused) { //if the render() triggered callback that paused this timeline, we should abort (very rare, but possible) return; } this._time = recTime; this._totalTime = recTotalTime; this._cycle = recCycle; this._rawPrevTime = recRawPrevTime; } if ((this._time === prevTime || !this._first) && !force && !internalForce && !pauseTween) { if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate. this._callback("onUpdate"); } return; } else if (!this._initted) { this._initted = true; } if (!this._active) if (!this._paused && this._totalTime !== prevTotalTime && time > 0) { this._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example. } if (prevTotalTime === 0) if (this.vars.onStart) if (this._totalTime !== 0 || !this._totalDuration) if (!suppressEvents) { this._callback("onStart"); } curTime = this._time; if (curTime >= prevTime) { tween = this._first; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= this._time && !tween._paused && !tween._gc)) { if (pauseTween === tween) { this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } else { tween = this._last; while (tween) { next = tween._prev; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse. while (pauseTween && pauseTween.endTime() > this._time) { pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force); pauseTween = pauseTween._prev; } pauseTween = null; this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } if (this._onUpdate) if (!suppressEvents) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values. _lazyRender(); } this._callback("onUpdate"); } if (callback) if (!this._locked) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate if (isComplete) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values. _lazyRender(); } if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } } }; p.getActive = function(nested, tweens, timelines) { if (nested == null) { nested = true; } if (tweens == null) { tweens = true; } if (timelines == null) { timelines = false; } var a = [], all = this.getChildren(nested, tweens, timelines), cnt = 0, l = all.length, i, tween; for (i = 0; i < l; i++) { tween = all[i]; if (tween.isActive()) { a[cnt++] = tween; } } return a; }; p.getLabelAfter = function(time) { if (!time) if (time !== 0) { //faster than isNan() time = this._time; } var labels = this.getLabelsArray(), l = labels.length, i; for (i = 0; i < l; i++) { if (labels[i].time > time) { return labels[i].name; } } return null; }; p.getLabelBefore = function(time) { if (time == null) { time = this._time; } var labels = this.getLabelsArray(), i = labels.length; while (--i > -1) { if (labels[i].time < time) { return labels[i].name; } } return null; }; p.getLabelsArray = function() { var a = [], cnt = 0, p; for (p in this._labels) { a[cnt++] = {time:this._labels[p], name:p}; } a.sort(function(a,b) { return a.time - b.time; }); return a; }; p.invalidate = function() { this._locked = false; //unlock and set cycle in case invalidate() is called from inside an onRepeat return TimelineLite.prototype.invalidate.call(this); }; //---- GETTERS / SETTERS ------------------------------------------------------------------------------------------------------- p.progress = function(value, suppressEvents) { return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents); }; p.totalProgress = function(value, suppressEvents) { return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, suppressEvents); }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { TimelineLite.prototype.totalDuration.call(this); //just forces refresh //Instead of Infinity, we use 999999999999 so that we can accommodate reverses. this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat); } return this._totalDuration; } return (this._repeat === -1 || !value) ? this : this.timeScale( this.totalDuration() / value ); }; p.time = function(value, suppressEvents) { if (!arguments.length) { return this._time; } if (this._dirty) { this.totalDuration(); } if (value > this._duration) { value = this._duration; } if (this._yoyo && (this._cycle & 1) !== 0) { value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay)); } else if (this._repeat !== 0) { value += this._cycle * (this._duration + this._repeatDelay); } return this.totalTime(value, suppressEvents); }; p.repeat = function(value) { if (!arguments.length) { return this._repeat; } this._repeat = value; return this._uncache(true); }; p.repeatDelay = function(value) { if (!arguments.length) { return this._repeatDelay; } this._repeatDelay = value; return this._uncache(true); }; p.yoyo = function(value) { if (!arguments.length) { return this._yoyo; } this._yoyo = value; return this; }; p.currentLabel = function(value) { if (!arguments.length) { return this.getLabelBefore(this._time + 0.00000001); } return this.seek(value, true); }; return TimelineMax; }, true); /* * ---------------------------------------------------------------- * TimelineLite * ---------------------------------------------------------------- */ _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) { var TimelineLite = function(vars) { SimpleTimeline.call(this, vars); this._labels = {}; this.autoRemoveChildren = (this.vars.autoRemoveChildren === true); this.smoothChildTiming = (this.vars.smoothChildTiming === true); this._sortChildren = true; this._onUpdate = this.vars.onUpdate; var v = this.vars, val, p; for (p in v) { val = v[p]; if (_isArray(val)) if (val.join("").indexOf("{self}") !== -1) { v[p] = this._swapSelfInParams(val); } } if (_isArray(v.tweens)) { this.add(v.tweens, 0, v.align, v.stagger); } }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _internals = TimelineLite._internals = {}, _isSelector = TweenLiteInternals.isSelector, _isArray = TweenLiteInternals.isArray, _lazyTweens = TweenLiteInternals.lazyTweens, _lazyRender = TweenLiteInternals.lazyRender, _globals = _gsScope._gsDefine.globals, _copy = function(vars) { var copy = {}, p; for (p in vars) { copy[p] = vars[p]; } return copy; }, _applyCycle = function(vars, targets, i) { var alt = vars.cycle, p, val; for (p in alt) { val = alt[p]; vars[p] = (typeof(val) === "function") ? val(i, targets[i]) : val[i % val.length]; } delete vars.cycle; }, _pauseCallback = _internals.pauseCallback = function() {}, _slice = function(a) { //don't use [].slice because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, p = TimelineLite.prototype = new SimpleTimeline(); TimelineLite.version = "1.19.1"; p.constructor = TimelineLite; p.kill()._gc = p._forcingPlayhead = p._hasPause = false; /* might use later... //translates a local time inside an animation to the corresponding time on the root/global timeline, factoring in all nesting and timeScales. function localToGlobal(time, animation) { while (animation) { time = (time / animation._timeScale) + animation._startTime; animation = animation.timeline; } return time; } //translates the supplied time on the root/global timeline into the corresponding local time inside a particular animation, factoring in all nesting and timeScales function globalToLocal(time, animation) { var scale = 1; time -= localToGlobal(0, animation); while (animation) { scale *= animation._timeScale; animation = animation.timeline; } return time * scale; } */ p.to = function(target, duration, vars, position) { var Engine = (vars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( new Engine(target, duration, vars), position) : this.set(target, vars, position); }; p.from = function(target, duration, vars, position) { return this.add( ((vars.repeat && _globals.TweenMax) || TweenLite).from(target, duration, vars), position); }; p.fromTo = function(target, duration, fromVars, toVars, position) { var Engine = (toVars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( Engine.fromTo(target, duration, fromVars, toVars), position) : this.set(target, toVars, position); }; p.staggerTo = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { var tl = new TimelineLite({onComplete:onCompleteAll, onCompleteParams:onCompleteAllParams, callbackScope:onCompleteAllScope, smoothChildTiming:this.smoothChildTiming}), cycle = vars.cycle, copy, i; if (typeof(targets) === "string") { targets = TweenLite.selector(targets) || targets; } targets = targets || []; if (_isSelector(targets)) { //senses if the targets object is a selector. If it is, we should translate it into an array. targets = _slice(targets); } stagger = stagger || 0; if (stagger < 0) { targets = _slice(targets); targets.reverse(); stagger *= -1; } for (i = 0; i < targets.length; i++) { copy = _copy(vars); if (copy.startAt) { copy.startAt = _copy(copy.startAt); if (copy.startAt.cycle) { _applyCycle(copy.startAt, targets, i); } } if (cycle) { _applyCycle(copy, targets, i); if (copy.duration != null) { duration = copy.duration; delete copy.duration; } } tl.to(targets[i], duration, copy, i * stagger); } return this.add(tl, position); }; p.staggerFrom = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { vars.immediateRender = (vars.immediateRender != false); vars.runBackwards = true; return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.staggerFromTo = function(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.call = function(callback, params, scope, position) { return this.add( TweenLite.delayedCall(0, callback, params, scope), position); }; p.set = function(target, vars, position) { position = this._parseTimeOrLabel(position, 0, true); if (vars.immediateRender == null) { vars.immediateRender = (position === this._time && !this._paused); } return this.add( new TweenLite(target, 0, vars), position); }; TimelineLite.exportRoot = function(vars, ignoreDelayedCalls) { vars = vars || {}; if (vars.smoothChildTiming == null) { vars.smoothChildTiming = true; } var tl = new TimelineLite(vars), root = tl._timeline, tween, next; if (ignoreDelayedCalls == null) { ignoreDelayedCalls = true; } root._remove(tl, true); tl._startTime = 0; tl._rawPrevTime = tl._time = tl._totalTime = root._time; tween = root._first; while (tween) { next = tween._next; if (!ignoreDelayedCalls || !(tween instanceof TweenLite && tween.target === tween.vars.onComplete)) { tl.add(tween, tween._startTime - tween._delay); } tween = next; } root.add(tl, 0); return tl; }; p.add = function(value, position, align, stagger) { var curTime, l, i, child, tl, beforeRawTime; if (typeof(position) !== "number") { position = this._parseTimeOrLabel(position, 0, true, value); } if (!(value instanceof Animation)) { if ((value instanceof Array) || (value && value.push && _isArray(value))) { align = align || "normal"; stagger = stagger || 0; curTime = position; l = value.length; for (i = 0; i < l; i++) { if (_isArray(child = value[i])) { child = new TimelineLite({tweens:child}); } this.add(child, curTime); if (typeof(child) !== "string" && typeof(child) !== "function") { if (align === "sequence") { curTime = child._startTime + (child.totalDuration() / child._timeScale); } else if (align === "start") { child._startTime -= child.delay(); } } curTime += stagger; } return this._uncache(true); } else if (typeof(value) === "string") { return this.addLabel(value, position); } else if (typeof(value) === "function") { value = TweenLite.delayedCall(0, value); } else { throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string."); } } SimpleTimeline.prototype.add.call(this, value, position); //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate. if (this._gc || this._time === this._duration) if (!this._paused) if (this._duration < this.duration()) { //in case any of the ancestors had completed but should now be enabled... tl = this; beforeRawTime = (tl.rawTime() > value._startTime); //if the tween is placed on the timeline so that it starts BEFORE the current rawTime, we should align the playhead (move the timeline). This is because sometimes users will create a timeline, let it finish, and much later append a tween and expect it to run instead of jumping to its end state. While technically one could argue that it should jump to its end state, that's not what users intuitively expect. while (tl._timeline) { if (beforeRawTime && tl._timeline.smoothChildTiming) { tl.totalTime(tl._totalTime, true); //moves the timeline (shifts its startTime) if necessary, and also enables it. } else if (tl._gc) { tl._enabled(true, false); } tl = tl._timeline; } } return this; }; p.remove = function(value) { if (value instanceof Animation) { this._remove(value, false); var tl = value._timeline = value.vars.useFrames ? Animation._rootFramesTimeline : Animation._rootTimeline; //now that it's removed, default it to the root timeline so that if it gets played again, it doesn't jump back into this timeline. value._startTime = (value._paused ? value._pauseTime : tl._time) - ((!value._reversed ? value._totalTime : value.totalDuration() - value._totalTime) / value._timeScale); //ensure that if it gets played again, the timing is correct. return this; } else if (value instanceof Array || (value && value.push && _isArray(value))) { var i = value.length; while (--i > -1) { this.remove(value[i]); } return this; } else if (typeof(value) === "string") { return this.removeLabel(value); } return this.kill(null, value); }; p._remove = function(tween, skipDisable) { SimpleTimeline.prototype._remove.call(this, tween, skipDisable); var last = this._last; if (!last) { this._time = this._totalTime = this._duration = this._totalDuration = 0; } else if (this._time > this.duration()) { this._time = this._duration; this._totalTime = this._totalDuration; } return this; }; p.append = function(value, offsetOrLabel) { return this.add(value, this._parseTimeOrLabel(null, offsetOrLabel, true, value)); }; p.insert = p.insertMultiple = function(value, position, align, stagger) { return this.add(value, position || 0, align, stagger); }; p.appendMultiple = function(tweens, offsetOrLabel, align, stagger) { return this.add(tweens, this._parseTimeOrLabel(null, offsetOrLabel, true, tweens), align, stagger); }; p.addLabel = function(label, position) { this._labels[label] = this._parseTimeOrLabel(position); return this; }; p.addPause = function(position, callback, params, scope) { var t = TweenLite.delayedCall(0, _pauseCallback, params, scope || this); t.vars.onComplete = t.vars.onReverseComplete = callback; t.data = "isPause"; this._hasPause = true; return this.add(t, position); }; p.removeLabel = function(label) { delete this._labels[label]; return this; }; p.getLabelTime = function(label) { return (this._labels[label] != null) ? this._labels[label] : -1; }; p._parseTimeOrLabel = function(timeOrLabel, offsetOrLabel, appendIfAbsent, ignore) { var i; //if we're about to add a tween/timeline (or an array of them) that's already a child of this timeline, we should remove it first so that it doesn't contaminate the duration(). if (ignore instanceof Animation && ignore.timeline === this) { this.remove(ignore); } else if (ignore && ((ignore instanceof Array) || (ignore.push && _isArray(ignore)))) { i = ignore.length; while (--i > -1) { if (ignore[i] instanceof Animation && ignore[i].timeline === this) { this.remove(ignore[i]); } } } if (typeof(offsetOrLabel) === "string") { return this._parseTimeOrLabel(offsetOrLabel, (appendIfAbsent && typeof(timeOrLabel) === "number" && this._labels[offsetOrLabel] == null) ? timeOrLabel - this.duration() : 0, appendIfAbsent); } offsetOrLabel = offsetOrLabel || 0; if (typeof(timeOrLabel) === "string" && (isNaN(timeOrLabel) || this._labels[timeOrLabel] != null)) { //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value). i = timeOrLabel.indexOf("="); if (i === -1) { if (this._labels[timeOrLabel] == null) { return appendIfAbsent ? (this._labels[timeOrLabel] = this.duration() + offsetOrLabel) : offsetOrLabel; } return this._labels[timeOrLabel] + offsetOrLabel; } offsetOrLabel = parseInt(timeOrLabel.charAt(i-1) + "1", 10) * Number(timeOrLabel.substr(i+1)); timeOrLabel = (i > 1) ? this._parseTimeOrLabel(timeOrLabel.substr(0, i-1), 0, appendIfAbsent) : this.duration(); } else if (timeOrLabel == null) { timeOrLabel = this.duration(); } return Number(timeOrLabel) + offsetOrLabel; }; p.seek = function(position, suppressEvents) { return this.totalTime((typeof(position) === "number") ? position : this._parseTimeOrLabel(position), (suppressEvents !== false)); }; p.stop = function() { return this.paused(true); }; p.gotoAndPlay = function(position, suppressEvents) { return this.play(position, suppressEvents); }; p.gotoAndStop = function(position, suppressEvents) { return this.pause(position, suppressEvents); }; p.render = function(time, suppressEvents, force) { if (this._gc) { this._enabled(true, false); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), prevTime = this._time, prevStart = this._startTime, prevTimeScale = this._timeScale, prevPaused = this._paused, tween, isComplete, next, callback, internalForce, pauseTween, curTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = this._time = totalDur; if (!this._reversed) if (!this._hasPausedChild()) { isComplete = true; callback = "onComplete"; internalForce = !!this._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. if (this._duration === 0) if ((time <= 0 && time >= -0.0000001) || this._rawPrevTime < 0 || this._rawPrevTime === _tinyNum) if (this._rawPrevTime !== time && this._first) { internalForce = true; if (this._rawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } } this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. time = totalDur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = 0; if (prevTime !== 0 || (this._duration === 0 && this._rawPrevTime !== _tinyNum && (this._rawPrevTime > 0 || (time < 0 && this._rawPrevTime >= 0)))) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (this._timeline.autoRemoveChildren && this._reversed) { //ensures proper GC if a timeline is resumed after it's finished reversing. internalForce = isComplete = true; callback = "onReverseComplete"; } else if (this._rawPrevTime >= 0 && this._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state. internalForce = true; } this._rawPrevTime = time; } else { this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good). tween = this._first; while (tween && tween._startTime === 0) { if (!tween._duration) { isComplete = false; } tween = tween._next; } } time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline) if (!this._initted) { internalForce = true; } } } else { if (this._hasPause && !this._forcingPlayhead && !suppressEvents) { if (time >= prevTime) { tween = this._first; while (tween && tween._startTime <= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && this._rawPrevTime === 0)) { pauseTween = tween; } tween = tween._next; } } else { tween = this._last; while (tween && tween._startTime >= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) { pauseTween = tween; } tween = tween._prev; } } if (pauseTween) { this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } } this._totalTime = this._time = this._rawPrevTime = time; } if ((this._time === prevTime || !this._first) && !force && !internalForce && !pauseTween) { return; } else if (!this._initted) { this._initted = true; } if (!this._active) if (!this._paused && this._time !== prevTime && time > 0) { this._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example. } if (prevTime === 0) if (this.vars.onStart) if (this._time !== 0 || !this._duration) if (!suppressEvents) { this._callback("onStart"); } curTime = this._time; if (curTime >= prevTime) { tween = this._first; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= curTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } else { tween = this._last; while (tween) { next = tween._prev; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse. while (pauseTween && pauseTween.endTime() > this._time) { pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force); pauseTween = pauseTween._prev; } pauseTween = null; this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } if (this._onUpdate) if (!suppressEvents) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values. _lazyRender(); } this._callback("onUpdate"); } if (callback) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate if (isComplete) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values. _lazyRender(); } if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } } }; p._hasPausedChild = function() { var tween = this._first; while (tween) { if (tween._paused || ((tween instanceof TimelineLite) && tween._hasPausedChild())) { return true; } tween = tween._next; } return false; }; p.getChildren = function(nested, tweens, timelines, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || -9999999999; var a = [], tween = this._first, cnt = 0; while (tween) { if (tween._startTime < ignoreBeforeTime) { //do nothing } else if (tween instanceof TweenLite) { if (tweens !== false) { a[cnt++] = tween; } } else { if (timelines !== false) { a[cnt++] = tween; } if (nested !== false) { a = a.concat(tween.getChildren(true, tweens, timelines)); cnt = a.length; } } tween = tween._next; } return a; }; p.getTweensOf = function(target, nested) { var disabled = this._gc, a = [], cnt = 0, tweens, i; if (disabled) { this._enabled(true, true); //getTweensOf() filters out disabled tweens, and we have to mark them as _gc = true when the timeline completes in order to allow clean garbage collection, so temporarily re-enable the timeline here. } tweens = TweenLite.getTweensOf(target); i = tweens.length; while (--i > -1) { if (tweens[i].timeline === this || (nested && this._contains(tweens[i]))) { a[cnt++] = tweens[i]; } } if (disabled) { this._enabled(false, true); } return a; }; p.recent = function() { return this._recent; }; p._contains = function(tween) { var tl = tween.timeline; while (tl) { if (tl === this) { return true; } tl = tl.timeline; } return false; }; p.shiftChildren = function(amount, adjustLabels, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || 0; var tween = this._first, labels = this._labels, p; while (tween) { if (tween._startTime >= ignoreBeforeTime) { tween._startTime += amount; } tween = tween._next; } if (adjustLabels) { for (p in labels) { if (labels[p] >= ignoreBeforeTime) { labels[p] += amount; } } } return this._uncache(true); }; p._kill = function(vars, target) { if (!vars && !target) { return this._enabled(false, false); } var tweens = (!target) ? this.getChildren(true, true, false) : this.getTweensOf(target), i = tweens.length, changed = false; while (--i > -1) { if (tweens[i]._kill(vars, target)) { changed = true; } } return changed; }; p.clear = function(labels) { var tweens = this.getChildren(false, true, true), i = tweens.length; this._time = this._totalTime = 0; while (--i > -1) { tweens[i]._enabled(false, false); } if (labels !== false) { this._labels = {}; } return this._uncache(true); }; p.invalidate = function() { var tween = this._first; while (tween) { tween.invalidate(); tween = tween._next; } return Animation.prototype.invalidate.call(this);; }; p._enabled = function(enabled, ignoreTimeline) { if (enabled === this._gc) { var tween = this._first; while (tween) { tween._enabled(enabled, true); tween = tween._next; } } return SimpleTimeline.prototype._enabled.call(this, enabled, ignoreTimeline); }; p.totalTime = function(time, suppressEvents, uncapped) { this._forcingPlayhead = true; var val = Animation.prototype.totalTime.apply(this, arguments); this._forcingPlayhead = false; return val; }; p.duration = function(value) { if (!arguments.length) { if (this._dirty) { this.totalDuration(); //just triggers recalculation } return this._duration; } if (this.duration() !== 0 && value !== 0) { this.timeScale(this._duration / value); } return this; }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { var max = 0, tween = this._last, prevStart = 999999999999, prev, end; while (tween) { prev = tween._prev; //record it here in case the tween changes position in the sequence... if (tween._dirty) { tween.totalDuration(); //could change the tween._startTime, so make sure the tween's cache is clean before analyzing it. } if (tween._startTime > prevStart && this._sortChildren && !tween._paused) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence this.add(tween, tween._startTime - tween._delay); } else { prevStart = tween._startTime; } if (tween._startTime < 0 && !tween._paused) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found. max -= tween._startTime; if (this._timeline.smoothChildTiming) { this._startTime += tween._startTime / this._timeScale; } this.shiftChildren(-tween._startTime, false, -9999999999); prevStart = 0; } end = tween._startTime + (tween._totalDuration / tween._timeScale); if (end > max) { max = end; } tween = prev; } this._duration = this._totalDuration = max; this._dirty = false; } return this._totalDuration; } return (value && this.totalDuration()) ? this.timeScale(this._totalDuration / value) : this; }; p.paused = function(value) { if (!value) { //if there's a pause directly at the spot from where we're unpausing, skip it. var tween = this._first, time = this._time; while (tween) { if (tween._startTime === time && tween.data === "isPause") { tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire. } tween = tween._next; } } return Animation.prototype.paused.apply(this, arguments); }; p.usesFrames = function() { var tl = this._timeline; while (tl._timeline) { tl = tl._timeline; } return (tl === Animation._rootFramesTimeline); }; p.rawTime = function(wrapRepeats) { return (wrapRepeats && (this._paused || (this._repeat && this.time() > 0 && this.totalProgress() < 1))) ? this._totalTime % (this._duration + this._repeatDelay) : this._paused ? this._totalTime : (this._timeline.rawTime(wrapRepeats) - this._startTime) * this._timeScale; }; return TimelineLite; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["./TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("./TweenLite.js"); //dependency module.exports = getGlobal(); } }("TimelineMax")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 | 1 1 1 1 | /*!
* VERSION: 1.19.1
* DATE: 2017-01-17
* UPDATES AND DOCS AT: http://greensock.com
*
* @license Copyright (c) 2008-2017, GreenSock. All rights reserved.
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
*/
(function(window, moduleName) {
"use strict";
var _exports = {},
_doc = window.document,
_globals = window.GreenSockGlobals = window.GreenSockGlobals || window;
Eif (_globals.TweenLite) {
return; //in case the core set of classes is already loaded, don't instantiate twice.
}
var _namespace = function(ns) {
var a = ns.split("."),
p = _globals, i;
for (i = 0; i < a.length; i++) {
p[a[i]] = p = p[a[i]] || {};
}
return p;
},
gs = _namespace("com.greensock"),
_tinyNum = 0.0000000001,
_slice = function(a) { //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll()
var b = [],
l = a.length,
i;
for (i = 0; i !== l; b.push(a[i++])) {}
return b;
},
_emptyFunc = function() {},
_isArray = (function() { //works around issues in iframe environments where the Array global isn't shared, thus if the object originates in a different window/iframe, "(obj instanceof Array)" will evaluate false. We added some speed optimizations to avoid Object.prototype.toString.call() unless it's absolutely necessary because it's VERY slow (like 20x slower)
var toString = Object.prototype.toString,
array = toString.call([]);
return function(obj) {
return obj != null && (obj instanceof Array || (typeof(obj) === "object" && !!obj.push && toString.call(obj) === array));
};
}()),
a, i, p, _ticker, _tickerActive,
_defLookup = {},
/**
* @constructor
* Defines a GreenSock class, optionally with an array of dependencies that must be instantiated first and passed into the definition.
* This allows users to load GreenSock JS files in any order even if they have interdependencies (like CSSPlugin extends TweenPlugin which is
* inside TweenLite.js, but if CSSPlugin is loaded first, it should wait to run its code until TweenLite.js loads and instantiates TweenPlugin
* and then pass TweenPlugin to CSSPlugin's definition). This is all done automatically and internally.
*
* Every definition will be added to a "com.greensock" global object (typically window, but if a window.GreenSockGlobals object is found,
* it will go there as of v1.7). For example, TweenLite will be found at window.com.greensock.TweenLite and since it's a global class that should be available anywhere,
* it is ALSO referenced at window.TweenLite. However some classes aren't considered global, like the base com.greensock.core.Animation class, so
* those will only be at the package like window.com.greensock.core.Animation. Again, if you define a GreenSockGlobals object on the window, everything
* gets tucked neatly inside there instead of on the window directly. This allows you to do advanced things like load multiple versions of GreenSock
* files and put them into distinct objects (imagine a banner ad uses a newer version but the main site uses an older one). In that case, you could
* sandbox the banner one like:
*
* <script>
* var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever.
* </script>
* <script src="js/greensock/v1.7/TweenMax.js"></script>
* <script>
* window.GreenSockGlobals = window._gsQueue = window._gsDefine = null; //reset it back to null (along with the special _gsQueue variable) so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...)
* </script>
* <script src="js/greensock/v1.6/TweenMax.js"></script>
* <script>
* gs.TweenLite.to(...); //would use v1.7
* TweenLite.to(...); //would use v1.6
* </script>
*
* @param {!string} ns The namespace of the class definition, leaving off "com.greensock." as that's assumed. For example, "TweenLite" or "plugins.CSSPlugin" or "easing.Back".
* @param {!Array.<string>} dependencies An array of dependencies (described as their namespaces minus "com.greensock." prefix). For example ["TweenLite","plugins.TweenPlugin","core.Animation"]
* @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition.
* @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object)
*/
Definition = function(ns, dependencies, func, global) {
this.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses
_defLookup[ns] = this;
this.gsClass = null;
this.func = func;
var _classes = [];
this.check = function(init) {
var i = dependencies.length,
missing = i,
cur, a, n, cl, hasModule;
while (--i > -1) {
if ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) {
_classes[i] = cur.gsClass;
missing--;
} else if (init) {
cur.sc.push(this);
}
}
if (missing === 0 && func) {
a = ("com.greensock." + ns).split(".");
n = a.pop();
cl = _namespace(a.join("."))[n] = this.gsClass = func.apply(func, _classes);
//exports to multiple environments
if (global) {
_globals[n] = _exports[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.)
hasModule = (typeof(module) !== "undefined" && module.exports);
if (!hasModule && typeof(define) === "function" && define.amd){ //AMD
define((window.GreenSockAMDPath ? window.GreenSockAMDPath + "/" : "") + ns.split(".").pop(), [], function() { return cl; });
} else if (hasModule){ //node
if (ns === moduleName) {
module.exports = _exports[moduleName] = cl;
for (i in _exports) {
cl[i] = _exports[i];
}
} else if (_exports[moduleName]) {
_exports[moduleName][n] = cl;
}
}
}
for (i = 0; i < this.sc.length; i++) {
this.sc[i].check();
}
}
};
this.check(true);
},
//used to create Definition instances (which basically registers a class that has dependencies).
_gsDefine = window._gsDefine = function(ns, dependencies, func, global) {
return new Definition(ns, dependencies, func, global);
},
//a quick way to create a class that doesn't have any dependencies. Returns the class, but first registers it in the GreenSock namespace so that other classes can grab it (other classes might be dependent on the class).
_class = gs._class = function(ns, func, global) {
func = func || function() {};
_gsDefine(ns, [], function(){ return func; }, global);
return func;
};
_gsDefine.globals = _globals;
/*
* ----------------------------------------------------------------
* Ease
* ----------------------------------------------------------------
*/
var _baseParams = [0, 0, 1, 1],
_blankArray = [],
Ease = _class("easing.Ease", function(func, extraParams, type, power) {
this._func = func;
this._type = type || 0;
this._power = power || 0;
this._params = extraParams ? _baseParams.concat(extraParams) : _baseParams;
}, true),
_easeMap = Ease.map = {},
_easeReg = Ease.register = function(ease, names, types, create) {
var na = names.split(","),
i = na.length,
ta = (types || "easeIn,easeOut,easeInOut").split(","),
e, name, j, type;
while (--i > -1) {
name = na[i];
e = create ? _class("easing."+name, null, true) : gs.easing[name] || {};
j = ta.length;
while (--j > -1) {
type = ta[j];
_easeMap[name + "." + type] = _easeMap[type + name] = e[type] = ease.getRatio ? ease : ease[type] || new ease();
}
}
};
p = Ease.prototype;
p._calcEnd = false;
p.getRatio = function(p) {
if (this._func) {
this._params[0] = p;
return this._func.apply(null, this._params);
}
var t = this._type,
pw = this._power,
r = (t === 1) ? 1 - p : (t === 2) ? p : (p < 0.5) ? p * 2 : (1 - p) * 2;
if (pw === 1) {
r *= r;
} else if (pw === 2) {
r *= r * r;
} else if (pw === 3) {
r *= r * r * r;
} else if (pw === 4) {
r *= r * r * r * r;
}
return (t === 1) ? 1 - r : (t === 2) ? r : (p < 0.5) ? r / 2 : 1 - (r / 2);
};
//create all the standard eases like Linear, Quad, Cubic, Quart, Quint, Strong, Power0, Power1, Power2, Power3, and Power4 (each with easeIn, easeOut, and easeInOut)
a = ["Linear","Quad","Cubic","Quart","Quint,Strong"];
i = a.length;
while (--i > -1) {
p = a[i]+",Power"+i;
_easeReg(new Ease(null,null,1,i), p, "easeOut", true);
_easeReg(new Ease(null,null,2,i), p, "easeIn" + ((i === 0) ? ",easeNone" : ""));
_easeReg(new Ease(null,null,3,i), p, "easeInOut");
}
_easeMap.linear = gs.easing.Linear.easeIn;
_easeMap.swing = gs.easing.Quad.easeInOut; //for jQuery folks
/*
* ----------------------------------------------------------------
* EventDispatcher
* ----------------------------------------------------------------
*/
var EventDispatcher = _class("events.EventDispatcher", function(target) {
this._listeners = {};
this._eventTarget = target || this;
});
p = EventDispatcher.prototype;
p.addEventListener = function(type, callback, scope, useParam, priority) {
priority = priority || 0;
var list = this._listeners[type],
index = 0,
listener, i;
if (this === _ticker && !_tickerActive) {
_ticker.wake();
}
if (list == null) {
this._listeners[type] = list = [];
}
i = list.length;
while (--i > -1) {
listener = list[i];
if (listener.c === callback && listener.s === scope) {
list.splice(i, 1);
} else if (index === 0 && listener.pr < priority) {
index = i + 1;
}
}
list.splice(index, 0, {c:callback, s:scope, up:useParam, pr:priority});
};
p.removeEventListener = function(type, callback) {
var list = this._listeners[type], i;
if (list) {
i = list.length;
while (--i > -1) {
if (list[i].c === callback) {
list.splice(i, 1);
return;
}
}
}
};
p.dispatchEvent = function(type) {
var list = this._listeners[type],
i, t, listener;
if (list) {
i = list.length;
if (i > 1) {
list = list.slice(0); //in case addEventListener() is called from within a listener/callback (otherwise the index could change, resulting in a skip)
}
t = this._eventTarget;
while (--i > -1) {
listener = list[i];
if (listener) {
if (listener.up) {
listener.c.call(listener.s || t, {type:type, target:t});
} else {
listener.c.call(listener.s || t);
}
}
}
}
};
/*
* ----------------------------------------------------------------
* Ticker
* ----------------------------------------------------------------
*/
var _reqAnimFrame = window.requestAnimationFrame,
_cancelAnimFrame = window.cancelAnimationFrame,
_getTime = Date.now || function() {return new Date().getTime();},
_lastUpdate = _getTime();
//now try to determine the requestAnimationFrame and cancelAnimationFrame functions and if none are found, we'll use a setTimeout()/clearTimeout() polyfill.
a = ["ms","moz","webkit","o"];
i = a.length;
while (--i > -1 && !_reqAnimFrame) {
_reqAnimFrame = window[a[i] + "RequestAnimationFrame"];
_cancelAnimFrame = window[a[i] + "CancelAnimationFrame"] || window[a[i] + "CancelRequestAnimationFrame"];
}
_class("Ticker", function(fps, useRAF) {
var _self = this,
_startTime = _getTime(),
_useRAF = (useRAF !== false && _reqAnimFrame) ? "auto" : false,
_lagThreshold = 500,
_adjustedLag = 33,
_tickWord = "tick", //helps reduce gc burden
_fps, _req, _id, _gap, _nextTime,
_tick = function(manual) {
var elapsed = _getTime() - _lastUpdate,
overlap, dispatch;
if (elapsed > _lagThreshold) {
_startTime += elapsed - _adjustedLag;
}
_lastUpdate += elapsed;
_self.time = (_lastUpdate - _startTime) / 1000;
overlap = _self.time - _nextTime;
if (!_fps || overlap > 0 || manual === true) {
_self.frame++;
_nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);
dispatch = true;
}
if (manual !== true) { //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
_id = _req(_tick);
}
if (dispatch) {
_self.dispatchEvent(_tickWord);
}
};
EventDispatcher.call(_self);
_self.time = _self.frame = 0;
_self.tick = function() {
_tick(true);
};
_self.lagSmoothing = function(threshold, adjustedLag) {
_lagThreshold = threshold || (1 / _tinyNum); //zero should be interpreted as basically unlimited
_adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);
};
_self.sleep = function() {
if (_id == null) {
return;
}
if (!_useRAF || !_cancelAnimFrame) {
clearTimeout(_id);
} else {
_cancelAnimFrame(_id);
}
_req = _emptyFunc;
_id = null;
if (_self === _ticker) {
_tickerActive = false;
}
};
_self.wake = function(seamless) {
if (_id !== null) {
_self.sleep();
} else if (seamless) {
_startTime += -_lastUpdate + (_lastUpdate = _getTime());
} else if (_self.frame > 10) { //don't trigger lagSmoothing if we're just waking up, and make sure that at least 10 frames have elapsed because of the iOS bug that we work around below with the 1.5-second setTimout().
_lastUpdate = _getTime() - _lagThreshold + 5;
}
_req = (_fps === 0) ? _emptyFunc : (!_useRAF || !_reqAnimFrame) ? function(f) { return setTimeout(f, ((_nextTime - _self.time) * 1000 + 1) | 0); } : _reqAnimFrame;
if (_self === _ticker) {
_tickerActive = true;
}
_tick(2);
};
_self.fps = function(value) {
if (!arguments.length) {
return _fps;
}
_fps = value;
_gap = 1 / (_fps || 60);
_nextTime = this.time + _gap;
_self.wake();
};
_self.useRAF = function(value) {
if (!arguments.length) {
return _useRAF;
}
_self.sleep();
_useRAF = value;
_self.fps(_fps);
};
_self.fps(fps);
//a bug in iOS 6 Safari occasionally prevents the requestAnimationFrame from working initially, so we use a 1.5-second timeout that automatically falls back to setTimeout() if it senses this condition.
setTimeout(function() {
if (_useRAF === "auto" && _self.frame < 5 && _doc.visibilityState !== "hidden") {
_self.useRAF(false);
}
}, 1500);
});
p = gs.Ticker.prototype = new gs.events.EventDispatcher();
p.constructor = gs.Ticker;
/*
* ----------------------------------------------------------------
* Animation
* ----------------------------------------------------------------
*/
var Animation = _class("core.Animation", function(duration, vars) {
this.vars = vars = vars || {};
this._duration = this._totalDuration = duration || 0;
this._delay = Number(vars.delay) || 0;
this._timeScale = 1;
this._active = (vars.immediateRender === true);
this.data = vars.data;
this._reversed = (vars.reversed === true);
if (!_rootTimeline) {
return;
}
if (!_tickerActive) { //some browsers (like iOS 6 Safari) shut down JavaScript execution when the tab is disabled and they [occasionally] neglect to start up requestAnimationFrame again when returning - this code ensures that the engine starts up again properly.
_ticker.wake();
}
var tl = this.vars.useFrames ? _rootFramesTimeline : _rootTimeline;
tl.add(this, tl._time);
if (this.vars.paused) {
this.paused(true);
}
});
_ticker = Animation.ticker = new gs.Ticker();
p = Animation.prototype;
p._dirty = p._gc = p._initted = p._paused = false;
p._totalTime = p._time = 0;
p._rawPrevTime = -1;
p._next = p._last = p._onUpdate = p._timeline = p.timeline = null;
p._paused = false;
//some browsers (like iOS) occasionally drop the requestAnimationFrame event when the user switches to a different tab and then comes back again, so we use a 2-second setTimeout() to sense if/when that condition occurs and then wake() the ticker.
var _checkTimeout = function() {
if (_tickerActive && _getTime() - _lastUpdate > 2000) {
_ticker.wake();
}
setTimeout(_checkTimeout, 2000);
};
_checkTimeout();
p.play = function(from, suppressEvents) {
if (from != null) {
this.seek(from, suppressEvents);
}
return this.reversed(false).paused(false);
};
p.pause = function(atTime, suppressEvents) {
if (atTime != null) {
this.seek(atTime, suppressEvents);
}
return this.paused(true);
};
p.resume = function(from, suppressEvents) {
if (from != null) {
this.seek(from, suppressEvents);
}
return this.paused(false);
};
p.seek = function(time, suppressEvents) {
return this.totalTime(Number(time), suppressEvents !== false);
};
p.restart = function(includeDelay, suppressEvents) {
return this.reversed(false).paused(false).totalTime(includeDelay ? -this._delay : 0, (suppressEvents !== false), true);
};
p.reverse = function(from, suppressEvents) {
if (from != null) {
this.seek((from || this.totalDuration()), suppressEvents);
}
return this.reversed(true).paused(false);
};
p.render = function(time, suppressEvents, force) {
//stub - we override this method in subclasses.
};
p.invalidate = function() {
this._time = this._totalTime = 0;
this._initted = this._gc = false;
this._rawPrevTime = -1;
if (this._gc || !this.timeline) {
this._enabled(true);
}
return this;
};
p.isActive = function() {
var tl = this._timeline, //the 2 root timelines won't have a _timeline; they're always active.
startTime = this._startTime,
rawTime;
return (!tl || (!this._gc && !this._paused && tl.isActive() && (rawTime = tl.rawTime(true)) >= startTime && rawTime < startTime + this.totalDuration() / this._timeScale));
};
p._enabled = function (enabled, ignoreTimeline) {
if (!_tickerActive) {
_ticker.wake();
}
this._gc = !enabled;
this._active = this.isActive();
if (ignoreTimeline !== true) {
if (enabled && !this.timeline) {
this._timeline.add(this, this._startTime - this._delay);
} else if (!enabled && this.timeline) {
this._timeline._remove(this, true);
}
}
return false;
};
p._kill = function(vars, target) {
return this._enabled(false, false);
};
p.kill = function(vars, target) {
this._kill(vars, target);
return this;
};
p._uncache = function(includeSelf) {
var tween = includeSelf ? this : this.timeline;
while (tween) {
tween._dirty = true;
tween = tween.timeline;
}
return this;
};
p._swapSelfInParams = function(params) {
var i = params.length,
copy = params.concat();
while (--i > -1) {
if (params[i] === "{self}") {
copy[i] = this;
}
}
return copy;
};
p._callback = function(type) {
var v = this.vars,
callback = v[type],
params = v[type + "Params"],
scope = v[type + "Scope"] || v.callbackScope || this,
l = params ? params.length : 0;
switch (l) { //speed optimization; call() is faster than apply() so use it when there are only a few parameters (which is by far most common). Previously we simply did var v = this.vars; v[type].apply(v[type + "Scope"] || v.callbackScope || this, v[type + "Params"] || _blankArray);
case 0: callback.call(scope); break;
case 1: callback.call(scope, params[0]); break;
case 2: callback.call(scope, params[0], params[1]); break;
default: callback.apply(scope, params);
}
};
//----Animation getters/setters --------------------------------------------------------
p.eventCallback = function(type, callback, params, scope) {
if ((type || "").substr(0,2) === "on") {
var v = this.vars;
if (arguments.length === 1) {
return v[type];
}
if (callback == null) {
delete v[type];
} else {
v[type] = callback;
v[type + "Params"] = (_isArray(params) && params.join("").indexOf("{self}") !== -1) ? this._swapSelfInParams(params) : params;
v[type + "Scope"] = scope;
}
if (type === "onUpdate") {
this._onUpdate = callback;
}
}
return this;
};
p.delay = function(value) {
if (!arguments.length) {
return this._delay;
}
if (this._timeline.smoothChildTiming) {
this.startTime( this._startTime + value - this._delay );
}
this._delay = value;
return this;
};
p.duration = function(value) {
if (!arguments.length) {
this._dirty = false;
return this._duration;
}
this._duration = this._totalDuration = value;
this._uncache(true); //true in case it's a TweenMax or TimelineMax that has a repeat - we'll need to refresh the totalDuration.
if (this._timeline.smoothChildTiming) if (this._time > 0) if (this._time < this._duration) if (value !== 0) {
this.totalTime(this._totalTime * (value / this._duration), true);
}
return this;
};
p.totalDuration = function(value) {
this._dirty = false;
return (!arguments.length) ? this._totalDuration : this.duration(value);
};
p.time = function(value, suppressEvents) {
if (!arguments.length) {
return this._time;
}
if (this._dirty) {
this.totalDuration();
}
return this.totalTime((value > this._duration) ? this._duration : value, suppressEvents);
};
p.totalTime = function(time, suppressEvents, uncapped) {
if (!_tickerActive) {
_ticker.wake();
}
if (!arguments.length) {
return this._totalTime;
}
if (this._timeline) {
if (time < 0 && !uncapped) {
time += this.totalDuration();
}
if (this._timeline.smoothChildTiming) {
if (this._dirty) {
this.totalDuration();
}
var totalDuration = this._totalDuration,
tl = this._timeline;
if (time > totalDuration && !uncapped) {
time = totalDuration;
}
this._startTime = (this._paused ? this._pauseTime : tl._time) - ((!this._reversed ? time : totalDuration - time) / this._timeScale);
if (!tl._dirty) { //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.
this._uncache(false);
}
//in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The startTime of that child would get pushed out, but one of the ancestors may have completed.
if (tl._timeline) {
while (tl._timeline) {
if (tl._timeline._time !== (tl._startTime + tl._totalTime) / tl._timeScale) {
tl.totalTime(tl._totalTime, true);
}
tl = tl._timeline;
}
}
}
if (this._gc) {
this._enabled(true, false);
}
if (this._totalTime !== time || this._duration === 0) {
if (_lazyTweens.length) {
_lazyRender();
}
this.render(time, suppressEvents, false);
if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.
_lazyRender();
}
}
}
return this;
};
p.progress = p.totalProgress = function(value, suppressEvents) {
var duration = this.duration();
return (!arguments.length) ? (duration ? this._time / duration : this.ratio) : this.totalTime(duration * value, suppressEvents);
};
p.startTime = function(value) {
if (!arguments.length) {
return this._startTime;
}
if (value !== this._startTime) {
this._startTime = value;
if (this.timeline) if (this.timeline._sortChildren) {
this.timeline.add(this, value - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct.
}
}
return this;
};
p.endTime = function(includeRepeats) {
return this._startTime + ((includeRepeats != false) ? this.totalDuration() : this.duration()) / this._timeScale;
};
p.timeScale = function(value) {
if (!arguments.length) {
return this._timeScale;
}
value = value || _tinyNum; //can't allow zero because it'll throw the math off
if (this._timeline && this._timeline.smoothChildTiming) {
var pauseTime = this._pauseTime,
t = (pauseTime || pauseTime === 0) ? pauseTime : this._timeline.totalTime();
this._startTime = t - ((t - this._startTime) * this._timeScale / value);
}
this._timeScale = value;
return this._uncache(false);
};
p.reversed = function(value) {
if (!arguments.length) {
return this._reversed;
}
if (value != this._reversed) {
this._reversed = value;
this.totalTime(((this._timeline && !this._timeline.smoothChildTiming) ? this.totalDuration() - this._totalTime : this._totalTime), true);
}
return this;
};
p.paused = function(value) {
if (!arguments.length) {
return this._paused;
}
var tl = this._timeline,
raw, elapsed;
if (value != this._paused) if (tl) {
if (!_tickerActive && !value) {
_ticker.wake();
}
raw = tl.rawTime();
elapsed = raw - this._pauseTime;
if (!value && tl.smoothChildTiming) {
this._startTime += elapsed;
this._uncache(false);
}
this._pauseTime = value ? raw : null;
this._paused = value;
this._active = this.isActive();
if (!value && elapsed !== 0 && this._initted && this.duration()) {
raw = tl.smoothChildTiming ? this._totalTime : (raw - this._startTime) / this._timeScale;
this.render(raw, (raw === this._totalTime), true); //in case the target's properties changed via some other tween or manual update by the user, we should force a render.
}
}
if (this._gc && !value) {
this._enabled(true, false);
}
return this;
};
/*
* ----------------------------------------------------------------
* SimpleTimeline
* ----------------------------------------------------------------
*/
var SimpleTimeline = _class("core.SimpleTimeline", function(vars) {
Animation.call(this, 0, vars);
this.autoRemoveChildren = this.smoothChildTiming = true;
});
p = SimpleTimeline.prototype = new Animation();
p.constructor = SimpleTimeline;
p.kill()._gc = false;
p._first = p._last = p._recent = null;
p._sortChildren = false;
p.add = p.insert = function(child, position, align, stagger) {
var prevTween, st;
child._startTime = Number(position || 0) + child._delay;
if (child._paused) if (this !== child._timeline) { //we only adjust the _pauseTime if it wasn't in this timeline already. Remember, sometimes a tween will be inserted again into the same timeline when its startTime is changed so that the tweens in the TimelineLite/Max are re-ordered properly in the linked list (so everything renders in the proper order).
child._pauseTime = child._startTime + ((this.rawTime() - child._startTime) / child._timeScale);
}
if (child.timeline) {
child.timeline._remove(child, true); //removes from existing timeline so that it can be properly added to this one.
}
child.timeline = child._timeline = this;
if (child._gc) {
child._enabled(true, true);
}
prevTween = this._last;
if (this._sortChildren) {
st = child._startTime;
while (prevTween && prevTween._startTime > st) {
prevTween = prevTween._prev;
}
}
if (prevTween) {
child._next = prevTween._next;
prevTween._next = child;
} else {
child._next = this._first;
this._first = child;
}
if (child._next) {
child._next._prev = child;
} else {
this._last = child;
}
child._prev = prevTween;
this._recent = child;
if (this._timeline) {
this._uncache(true);
}
return this;
};
p._remove = function(tween, skipDisable) {
if (tween.timeline === this) {
if (!skipDisable) {
tween._enabled(false, true);
}
if (tween._prev) {
tween._prev._next = tween._next;
} else if (this._first === tween) {
this._first = tween._next;
}
if (tween._next) {
tween._next._prev = tween._prev;
} else if (this._last === tween) {
this._last = tween._prev;
}
tween._next = tween._prev = tween.timeline = null;
if (tween === this._recent) {
this._recent = this._last;
}
if (this._timeline) {
this._uncache(true);
}
}
return this;
};
p.render = function(time, suppressEvents, force) {
var tween = this._first,
next;
this._totalTime = this._time = this._rawPrevTime = time;
while (tween) {
next = tween._next; //record it here because the value could change after rendering...
if (tween._active || (time >= tween._startTime && !tween._paused)) {
if (!tween._reversed) {
tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
} else {
tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
}
}
tween = next;
}
};
p.rawTime = function() {
if (!_tickerActive) {
_ticker.wake();
}
return this._totalTime;
};
/*
* ----------------------------------------------------------------
* TweenLite
* ----------------------------------------------------------------
*/
var TweenLite = _class("TweenLite", function(target, duration, vars) {
Animation.call(this, duration, vars);
this.render = TweenLite.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method)
if (target == null) {
throw "Cannot tween a null target.";
}
this.target = target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;
var isSelector = (target.jquery || (target.length && target !== window && target[0] && (target[0] === window || (target[0].nodeType && target[0].style && !target.nodeType)))),
overwrite = this.vars.overwrite,
i, targ, targets;
this._overwrite = overwrite = (overwrite == null) ? _overwriteLookup[TweenLite.defaultOverwrite] : (typeof(overwrite) === "number") ? overwrite >> 0 : _overwriteLookup[overwrite];
if ((isSelector || target instanceof Array || (target.push && _isArray(target))) && typeof(target[0]) !== "number") {
this._targets = targets = _slice(target); //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll()
this._propLookup = [];
this._siblings = [];
for (i = 0; i < targets.length; i++) {
targ = targets[i];
if (!targ) {
targets.splice(i--, 1);
continue;
} else if (typeof(targ) === "string") {
targ = targets[i--] = TweenLite.selector(targ); //in case it's an array of strings
if (typeof(targ) === "string") {
targets.splice(i+1, 1); //to avoid an endless loop (can't imagine why the selector would return a string, but just in case)
}
continue;
} else if (targ.length && targ !== window && targ[0] && (targ[0] === window || (targ[0].nodeType && targ[0].style && !targ.nodeType))) { //in case the user is passing in an array of selector objects (like jQuery objects), we need to check one more level and pull things out if necessary. Also note that <select> elements pass all the criteria regarding length and the first child having style, so we must also check to ensure the target isn't an HTML node itself.
targets.splice(i--, 1);
this._targets = targets = targets.concat(_slice(targ));
continue;
}
this._siblings[i] = _register(targ, this, false);
if (overwrite === 1) if (this._siblings[i].length > 1) {
_applyOverwrite(targ, this, null, 1, this._siblings[i]);
}
}
} else {
this._propLookup = {};
this._siblings = _register(target, this, false);
if (overwrite === 1) if (this._siblings.length > 1) {
_applyOverwrite(target, this, null, 1, this._siblings);
}
}
if (this.vars.immediateRender || (duration === 0 && this._delay === 0 && this.vars.immediateRender !== false)) {
this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
this.render(Math.min(0, -this._delay)); //in case delay is negative
}
}, true),
_isSelector = function(v) {
return (v && v.length && v !== window && v[0] && (v[0] === window || (v[0].nodeType && v[0].style && !v.nodeType))); //we cannot check "nodeType" if the target is window from within an iframe, otherwise it will trigger a security error in some browsers like Firefox.
},
_autoCSS = function(vars, target) {
var css = {},
p;
for (p in vars) {
if (!_reservedProps[p] && (!(p in target) || p === "transform" || p === "x" || p === "y" || p === "width" || p === "height" || p === "className" || p === "border") && (!_plugins[p] || (_plugins[p] && _plugins[p]._autoCSS))) { //note: <img> elements contain read-only "x" and "y" properties. We should also prioritize editing css width/height rather than the element's properties.
css[p] = vars[p];
delete vars[p];
}
}
vars.css = css;
};
p = TweenLite.prototype = new Animation();
p.constructor = TweenLite;
p.kill()._gc = false;
//----TweenLite defaults, overwrite management, and root updates ----------------------------------------------------
p.ratio = 0;
p._firstPT = p._targets = p._overwrittenProps = p._startAt = null;
p._notifyPluginsOfEnabled = p._lazy = false;
TweenLite.version = "1.19.1";
TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1);
TweenLite.defaultOverwrite = "auto";
TweenLite.ticker = _ticker;
TweenLite.autoSleep = 120;
TweenLite.lagSmoothing = function(threshold, adjustedLag) {
_ticker.lagSmoothing(threshold, adjustedLag);
};
TweenLite.selector = window.$ || window.jQuery || function(e) {
var selector = window.$ || window.jQuery;
if (selector) {
TweenLite.selector = selector;
return selector(e);
}
return (typeof(_doc) === "undefined") ? e : (_doc.querySelectorAll ? _doc.querySelectorAll(e) : _doc.getElementById((e.charAt(0) === "#") ? e.substr(1) : e));
};
var _lazyTweens = [],
_lazyLookup = {},
_numbersExp = /(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig,
//_nonNumbersExp = /(?:([\-+](?!(\d|=)))|[^\d\-+=e]|(e(?![\-+][\d])))+/ig,
_setRatio = function(v) {
var pt = this._firstPT,
min = 0.000001,
val;
while (pt) {
val = !pt.blob ? pt.c * v + pt.s : (v === 1) ? this.end : v ? this.join("") : this.start;
if (pt.m) {
val = pt.m(val, this._target || pt.t);
} else if (val < min) if (val > -min && !pt.blob) { //prevents issues with converting very small numbers to strings in the browser
val = 0;
}
if (!pt.f) {
pt.t[pt.p] = val;
} else if (pt.fp) {
pt.t[pt.p](pt.fp, val);
} else {
pt.t[pt.p](val);
}
pt = pt._next;
}
},
//compares two strings (start/end), finds the numbers that are different and spits back an array representing the whole value but with the changing values isolated as elements. For example, "rgb(0,0,0)" and "rgb(100,50,0)" would become ["rgb(", 0, ",", 50, ",0)"]. Notice it merges the parts that are identical (performance optimization). The array also has a linked list of PropTweens attached starting with _firstPT that contain the tweening data (t, p, s, c, f, etc.). It also stores the starting value as a "start" property so that we can revert to it if/when necessary, like when a tween rewinds fully. If the quantity of numbers differs between the start and end, it will always prioritize the end value(s). The pt parameter is optional - it's for a PropTween that will be appended to the end of the linked list and is typically for actually setting the value after all of the elements have been updated (with array.join("")).
_blobDif = function(start, end, filter, pt) {
var a = [],
charIndex = 0,
s = "",
color = 0,
startNums, endNums, num, i, l, nonNumbers, currentNum;
a.start = start;
a.end = end;
start = a[0] = start + ""; //ensure values are strings
end = a[1] = end + "";
if (filter) {
filter(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.
start = a[0];
end = a[1];
}
a.length = 0;
startNums = start.match(_numbersExp) || [];
endNums = end.match(_numbersExp) || [];
if (pt) {
pt._next = null;
pt.blob = 1;
a._firstPT = a._applyPT = pt; //apply last in the linked list (which means inserting it first)
}
l = endNums.length;
for (i = 0; i < l; i++) {
currentNum = endNums[i];
nonNumbers = end.substr(charIndex, end.indexOf(currentNum, charIndex)-charIndex);
s += (nonNumbers || !i) ? nonNumbers : ","; //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
charIndex += nonNumbers.length;
if (color) { //sense rgba() values and round them.
color = (color + 1) % 5;
} else if (nonNumbers.substr(-5) === "rgba(") {
color = 1;
}
if (currentNum === startNums[i] || startNums.length <= i) {
s += currentNum;
} else {
if (s) {
a.push(s);
s = "";
}
num = parseFloat(startNums[i]);
a.push(num);
a._firstPT = {_next: a._firstPT, t:a, p: a.length-1, s:num, c:((currentNum.charAt(1) === "=") ? parseInt(currentNum.charAt(0) + "1", 10) * parseFloat(currentNum.substr(2)) : (parseFloat(currentNum) - num)) || 0, f:0, m:(color && color < 4) ? Math.round : 0};
//note: we don't set _prev because we'll never need to remove individual PropTweens from this list.
}
charIndex += currentNum.length;
}
s += end.substr(charIndex);
if (s) {
a.push(s);
}
a.setRatio = _setRatio;
return a;
},
//note: "funcParam" is only necessary for function-based getters/setters that require an extra parameter like getAttribute("width") and setAttribute("width", value). In this example, funcParam would be "width". Used by AttrPlugin for example.
_addPropTween = function(target, prop, start, end, overwriteProp, mod, funcParam, stringFilter, index) {
if (typeof(end) === "function") {
end = end(index || 0, target);
}
var type = typeof(target[prop]),
getterName = (type !== "function") ? "" : ((prop.indexOf("set") || typeof(target["get" + prop.substr(3)]) !== "function") ? prop : "get" + prop.substr(3)),
s = (start !== "get") ? start : !getterName ? target[prop] : funcParam ? target[getterName](funcParam) : target[getterName](),
isRelative = (typeof(end) === "string" && end.charAt(1) === "="),
pt = {t:target, p:prop, s:s, f:(type === "function"), pg:0, n:overwriteProp || prop, m:(!mod ? 0 : (typeof(mod) === "function") ? mod : Math.round), pr:0, c:isRelative ? parseInt(end.charAt(0) + "1", 10) * parseFloat(end.substr(2)) : (parseFloat(end) - s) || 0},
blob;
if (typeof(s) !== "number" || (typeof(end) !== "number" && !isRelative)) {
if (funcParam || isNaN(s) || (!isRelative && isNaN(end)) || typeof(s) === "boolean" || typeof(end) === "boolean") {
//a blob (string that has multiple numbers in it)
pt.fp = funcParam;
blob = _blobDif(s, (isRelative ? pt.s + pt.c : end), stringFilter || TweenLite.defaultStringFilter, pt);
pt = {t: blob, p: "setRatio", s: 0, c: 1, f: 2, pg: 0, n: overwriteProp || prop, pr: 0, m: 0}; //"2" indicates it's a Blob property tween. Needed for RoundPropsPlugin for example.
} else {
pt.s = parseFloat(s);
if (!isRelative) {
pt.c = (parseFloat(end) - pt.s) || 0;
}
}
}
if (pt.c) { //only add it to the linked list if there's a change.
if ((pt._next = this._firstPT)) {
pt._next._prev = pt;
}
this._firstPT = pt;
return pt;
}
},
_internals = TweenLite._internals = {isArray:_isArray, isSelector:_isSelector, lazyTweens:_lazyTweens, blobDif:_blobDif}, //gives us a way to expose certain private values to other GreenSock classes without contaminating tha main TweenLite object.
_plugins = TweenLite._plugins = {},
_tweenLookup = _internals.tweenLookup = {},
_tweenLookupNum = 0,
_reservedProps = _internals.reservedProps = {ease:1, delay:1, overwrite:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, runBackwards:1, startAt:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, autoCSS:1, lazy:1, onOverwrite:1, callbackScope:1, stringFilter:1, id:1},
_overwriteLookup = {none:0, all:1, auto:2, concurrent:3, allOnStart:4, preexisting:5, "true":1, "false":0},
_rootFramesTimeline = Animation._rootFramesTimeline = new SimpleTimeline(),
_rootTimeline = Animation._rootTimeline = new SimpleTimeline(),
_nextGCFrame = 30,
_lazyRender = _internals.lazyRender = function() {
var i = _lazyTweens.length,
tween;
_lazyLookup = {};
while (--i > -1) {
tween = _lazyTweens[i];
if (tween && tween._lazy !== false) {
tween.render(tween._lazy[0], tween._lazy[1], true);
tween._lazy = false;
}
}
_lazyTweens.length = 0;
};
_rootTimeline._startTime = _ticker.time;
_rootFramesTimeline._startTime = _ticker.frame;
_rootTimeline._active = _rootFramesTimeline._active = true;
setTimeout(_lazyRender, 1); //on some mobile devices, there isn't a "tick" before code runs which means any lazy renders wouldn't run before the next official "tick".
Animation._updateRoot = TweenLite.render = function() {
var i, a, p;
if (_lazyTweens.length) { //if code is run outside of the requestAnimationFrame loop, there may be tweens queued AFTER the engine refreshed, so we need to ensure any pending renders occur before we refresh again.
_lazyRender();
}
_rootTimeline.render((_ticker.time - _rootTimeline._startTime) * _rootTimeline._timeScale, false, false);
_rootFramesTimeline.render((_ticker.frame - _rootFramesTimeline._startTime) * _rootFramesTimeline._timeScale, false, false);
if (_lazyTweens.length) {
_lazyRender();
}
if (_ticker.frame >= _nextGCFrame) { //dump garbage every 120 frames or whatever the user sets TweenLite.autoSleep to
_nextGCFrame = _ticker.frame + (parseInt(TweenLite.autoSleep, 10) || 120);
for (p in _tweenLookup) {
a = _tweenLookup[p].tweens;
i = a.length;
while (--i > -1) {
if (a[i]._gc) {
a.splice(i, 1);
}
}
if (a.length === 0) {
delete _tweenLookup[p];
}
}
//if there are no more tweens in the root timelines, or if they're all paused, make the _timer sleep to reduce load on the CPU slightly
p = _rootTimeline._first;
if (!p || p._paused) if (TweenLite.autoSleep && !_rootFramesTimeline._first && _ticker._listeners.tick.length === 1) {
while (p && p._paused) {
p = p._next;
}
if (!p) {
_ticker.sleep();
}
}
}
};
_ticker.addEventListener("tick", Animation._updateRoot);
var _register = function(target, tween, scrub) {
var id = target._gsTweenID, a, i;
if (!_tweenLookup[id || (target._gsTweenID = id = "t" + (_tweenLookupNum++))]) {
_tweenLookup[id] = {target:target, tweens:[]};
}
if (tween) {
a = _tweenLookup[id].tweens;
a[(i = a.length)] = tween;
if (scrub) {
while (--i > -1) {
if (a[i] === tween) {
a.splice(i, 1);
}
}
}
}
return _tweenLookup[id].tweens;
},
_onOverwrite = function(overwrittenTween, overwritingTween, target, killedProps) {
var func = overwrittenTween.vars.onOverwrite, r1, r2;
if (func) {
r1 = func(overwrittenTween, overwritingTween, target, killedProps);
}
func = TweenLite.onOverwrite;
if (func) {
r2 = func(overwrittenTween, overwritingTween, target, killedProps);
}
return (r1 !== false && r2 !== false);
},
_applyOverwrite = function(target, tween, props, mode, siblings) {
var i, changed, curTween, l;
if (mode === 1 || mode >= 4) {
l = siblings.length;
for (i = 0; i < l; i++) {
if ((curTween = siblings[i]) !== tween) {
if (!curTween._gc) {
if (curTween._kill(null, target, tween)) {
changed = true;
}
}
} else if (mode === 5) {
break;
}
}
return changed;
}
//NOTE: Add 0.0000000001 to overcome floating point errors that can cause the startTime to be VERY slightly off (when a tween's time() is set for example)
var startTime = tween._startTime + _tinyNum,
overlaps = [],
oCount = 0,
zeroDur = (tween._duration === 0),
globalStart;
i = siblings.length;
while (--i > -1) {
if ((curTween = siblings[i]) === tween || curTween._gc || curTween._paused) {
//ignore
} else if (curTween._timeline !== tween._timeline) {
globalStart = globalStart || _checkOverlap(tween, 0, zeroDur);
if (_checkOverlap(curTween, globalStart, zeroDur) === 0) {
overlaps[oCount++] = curTween;
}
} else if (curTween._startTime <= startTime) if (curTween._startTime + curTween.totalDuration() / curTween._timeScale > startTime) if (!((zeroDur || !curTween._initted) && startTime - curTween._startTime <= 0.0000000002)) {
overlaps[oCount++] = curTween;
}
}
i = oCount;
while (--i > -1) {
curTween = overlaps[i];
if (mode === 2) if (curTween._kill(props, target, tween)) {
changed = true;
}
if (mode !== 2 || (!curTween._firstPT && curTween._initted)) {
if (mode !== 2 && !_onOverwrite(curTween, tween)) {
continue;
}
if (curTween._enabled(false, false)) { //if all property tweens have been overwritten, kill the tween.
changed = true;
}
}
}
return changed;
},
_checkOverlap = function(tween, reference, zeroDur) {
var tl = tween._timeline,
ts = tl._timeScale,
t = tween._startTime;
while (tl._timeline) {
t += tl._startTime;
ts *= tl._timeScale;
if (tl._paused) {
return -100;
}
tl = tl._timeline;
}
t /= ts;
return (t > reference) ? t - reference : ((zeroDur && t === reference) || (!tween._initted && t - reference < 2 * _tinyNum)) ? _tinyNum : ((t += tween.totalDuration() / tween._timeScale / ts) > reference + _tinyNum) ? 0 : t - reference - _tinyNum;
};
//---- TweenLite instance methods -----------------------------------------------------------------------------
p._init = function() {
var v = this.vars,
op = this._overwrittenProps,
dur = this._duration,
immediate = !!v.immediateRender,
ease = v.ease,
i, initPlugins, pt, p, startVars, l;
if (v.startAt) {
if (this._startAt) {
this._startAt.render(-1, true); //if we've run a startAt previously (when the tween instantiated), we should revert it so that the values re-instantiate correctly particularly for relative tweens. Without this, a TweenLite.fromTo(obj, 1, {x:"+=100"}, {x:"-=100"}), for example, would actually jump to +=200 because the startAt would run twice, doubling the relative change.
this._startAt.kill();
}
startVars = {};
for (p in v.startAt) { //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, 1, from, to).fromTo(e, 1, to, from);
startVars[p] = v.startAt[p];
}
startVars.overwrite = false;
startVars.immediateRender = true;
startVars.lazy = (immediate && v.lazy !== false);
startVars.startAt = startVars.delay = null; //no nesting of startAt objects allowed (otherwise it could cause an infinite loop).
this._startAt = TweenLite.to(this.target, 0, startVars);
if (immediate) {
if (this._time > 0) {
this._startAt = null; //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in TimelineLite/Max instances where immediateRender was false (which is the default in the convenience methods like from()).
} else if (dur !== 0) {
return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a TimelineLite or TimelineMax, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.
}
}
} else if (v.runBackwards && dur !== 0) {
//from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)
if (this._startAt) {
this._startAt.render(-1, true);
this._startAt.kill();
this._startAt = null;
} else {
if (this._time !== 0) { //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0
immediate = false;
}
pt = {};
for (p in v) { //copy props into a new object and skip any reserved props, otherwise onComplete or onUpdate or onStart could fire. We should, however, permit autoCSS to go through.
if (!_reservedProps[p] || p === "autoCSS") {
pt[p] = v[p];
}
}
pt.overwrite = 0;
pt.data = "isFromStart"; //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
pt.lazy = (immediate && v.lazy !== false);
pt.immediateRender = immediate; //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
this._startAt = TweenLite.to(this.target, 0, pt);
if (!immediate) {
this._startAt._init(); //ensures that the initial values are recorded
this._startAt._enabled(false); //no need to have the tween render on the next cycle. Disable it because we'll always manually control the renders of the _startAt tween.
if (this.vars.immediateRender) {
this._startAt = null;
}
} else if (this._time === 0) {
return;
}
}
}
this._ease = ease = (!ease) ? TweenLite.defaultEase : (ease instanceof Ease) ? ease : (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase;
if (v.easeParams instanceof Array && ease.config) {
this._ease = ease.config.apply(ease, v.easeParams);
}
this._easeType = this._ease._type;
this._easePower = this._ease._power;
this._firstPT = null;
if (this._targets) {
l = this._targets.length;
for (i = 0; i < l; i++) {
if ( this._initProps( this._targets[i], (this._propLookup[i] = {}), this._siblings[i], (op ? op[i] : null), i) ) {
initPlugins = true;
}
}
} else {
initPlugins = this._initProps(this.target, this._propLookup, this._siblings, op, 0);
}
if (initPlugins) {
TweenLite._onPluginEvent("_onInitAllProps", this); //reorders the array in order of priority. Uses a static TweenPlugin method in order to minimize file size in TweenLite
}
if (op) if (!this._firstPT) if (typeof(this.target) !== "function") { //if all tweening properties have been overwritten, kill the tween. If the target is a function, it's probably a delayedCall so let it live.
this._enabled(false, false);
}
if (v.runBackwards) {
pt = this._firstPT;
while (pt) {
pt.s += pt.c;
pt.c = -pt.c;
pt = pt._next;
}
}
this._onUpdate = v.onUpdate;
this._initted = true;
};
p._initProps = function(target, propLookup, siblings, overwrittenProps, index) {
var p, i, initPlugins, plugin, pt, v;
if (target == null) {
return false;
}
if (_lazyLookup[target._gsTweenID]) {
_lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)
}
if (!this.vars.css) if (target.style) if (target !== window && target.nodeType) if (_plugins.css) if (this.vars.autoCSS !== false) { //it's so common to use TweenLite/Max to animate the css of DOM elements, we assume that if the target is a DOM element, that's what is intended (a convenience so that users don't have to wrap things in css:{}, although we still recommend it for a slight performance boost and better specificity). Note: we cannot check "nodeType" on the window inside an iframe.
_autoCSS(this.vars, target);
}
for (p in this.vars) {
v = this.vars[p];
if (_reservedProps[p]) {
if (v) if ((v instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !== -1) {
this.vars[p] = v = this._swapSelfInParams(v, this);
}
} else if (_plugins[p] && (plugin = new _plugins[p]())._onInitTween(target, this.vars[p], this, index)) {
//t - target [object]
//p - property [string]
//s - start [number]
//c - change [number]
//f - isFunction [boolean]
//n - name [string]
//pg - isPlugin [boolean]
//pr - priority [number]
//m - mod [function | 0]
this._firstPT = pt = {_next:this._firstPT, t:plugin, p:"setRatio", s:0, c:1, f:1, n:p, pg:1, pr:plugin._priority, m:0};
i = plugin._overwriteProps.length;
while (--i > -1) {
propLookup[plugin._overwriteProps[i]] = this._firstPT;
}
if (plugin._priority || plugin._onInitAllProps) {
initPlugins = true;
}
if (plugin._onDisable || plugin._onEnable) {
this._notifyPluginsOfEnabled = true;
}
if (pt._next) {
pt._next._prev = pt;
}
} else {
propLookup[p] = _addPropTween.call(this, target, p, "get", v, p, 0, null, this.vars.stringFilter, index);
}
}
if (overwrittenProps) if (this._kill(overwrittenProps, target)) { //another tween may have tried to overwrite properties of this tween before init() was called (like if two tweens start at the same time, the one created second will run first)
return this._initProps(target, propLookup, siblings, overwrittenProps, index);
}
if (this._overwrite > 1) if (this._firstPT) if (siblings.length > 1) if (_applyOverwrite(target, this, propLookup, this._overwrite, siblings)) {
this._kill(propLookup, target);
return this._initProps(target, propLookup, siblings, overwrittenProps, index);
}
if (this._firstPT) if ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration)) { //zero duration tweens don't lazy render by default; everything else does.
_lazyLookup[target._gsTweenID] = true;
}
return initPlugins;
};
p.render = function(time, suppressEvents, force) {
var prevTime = this._time,
duration = this._duration,
prevRawPrevTime = this._rawPrevTime,
isComplete, callback, pt, rawPrevTime;
if (time >= duration - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts.
this._totalTime = this._time = duration;
this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1;
if (!this._reversed ) {
isComplete = true;
callback = "onComplete";
force = (force || this._timeline.autoRemoveChildren); //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline.
}
if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate.
time = 0;
}
if (prevRawPrevTime < 0 || (time <= 0 && time >= -0.0000001) || (prevRawPrevTime === _tinyNum && this.data !== "isPause")) if (prevRawPrevTime !== time) { //note: when this.data is "isPause", it's a callback added by addPause() on a timeline that we should not be triggered when LEAVING its exact start time. In other words, tl.addPause(1).play(1) shouldn't pause.
force = true;
if (prevRawPrevTime > _tinyNum) {
callback = "onReverseComplete";
}
}
this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
}
} else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.
this._totalTime = this._time = 0;
this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;
if (prevTime !== 0 || (duration === 0 && prevRawPrevTime > 0)) {
callback = "onReverseComplete";
isComplete = this._reversed;
}
if (time < 0) {
this._active = false;
if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
if (prevRawPrevTime >= 0 && !(prevRawPrevTime === _tinyNum && this.data === "isPause")) {
force = true;
}
this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
}
}
if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
force = true;
}
} else {
this._totalTime = this._time = time;
if (this._easeType) {
var r = time / duration, type = this._easeType, pow = this._easePower;
if (type === 1 || (type === 3 && r >= 0.5)) {
r = 1 - r;
}
if (type === 3) {
r *= 2;
}
if (pow === 1) {
r *= r;
} else if (pow === 2) {
r *= r * r;
} else if (pow === 3) {
r *= r * r * r;
} else if (pow === 4) {
r *= r * r * r * r;
}
if (type === 1) {
this.ratio = 1 - r;
} else if (type === 2) {
this.ratio = r;
} else if (time / duration < 0.5) {
this.ratio = r / 2;
} else {
this.ratio = 1 - (r / 2);
}
} else {
this.ratio = this._ease.getRatio(time / duration);
}
}
if (this._time === prevTime && !force) {
return;
} else if (!this._initted) {
this._init();
if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example.
return;
} else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) {
this._time = this._totalTime = prevTime;
this._rawPrevTime = prevRawPrevTime;
_lazyTweens.push(this);
this._lazy = [time, suppressEvents];
return;
}
//_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently.
if (this._time && !isComplete) {
this.ratio = this._ease.getRatio(this._time / duration);
} else if (isComplete && this._ease._calcEnd) {
this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1);
}
}
if (this._lazy !== false) { //in case a lazy render is pending, we should flush it because the new render is occurring now (imagine a lazy tween instantiating and then immediately the user calls tween.seek(tween.duration()), skipping to the end - the end render would be forced, and then if we didn't flush the lazy render, it'd fire AFTER the seek(), rendering it at the wrong time.
this._lazy = false;
}
if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) {
this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done.
}
if (prevTime === 0) {
if (this._startAt) {
if (time >= 0) {
this._startAt.render(time, suppressEvents, force);
} else if (!callback) {
callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area.
}
}
if (this.vars.onStart) if (this._time !== 0 || duration === 0) if (!suppressEvents) {
this._callback("onStart");
}
}
pt = this._firstPT;
while (pt) {
if (pt.f) {
pt.t[pt.p](pt.c * this.ratio + pt.s);
} else {
pt.t[pt.p] = pt.c * this.ratio + pt.s;
}
pt = pt._next;
}
if (this._onUpdate) {
if (time < 0) if (this._startAt && time !== -0.0001) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
}
if (!suppressEvents) if (this._time !== prevTime || isComplete || force) {
this._callback("onUpdate");
}
}
if (callback) if (!this._gc || force) { //check _gc because there's a chance that kill() could be called in an onUpdate
if (time < 0 && this._startAt && !this._onUpdate && time !== -0.0001) { //-0.0001 is a special value that we use when looping back to the beginning of a repeated TimelineMax, in which case we shouldn't render the _startAt values.
this._startAt.render(time, suppressEvents, force);
}
if (isComplete) {
if (this._timeline.autoRemoveChildren) {
this._enabled(false, false);
}
this._active = false;
}
if (!suppressEvents && this.vars[callback]) {
this._callback(callback);
}
if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless.
this._rawPrevTime = 0;
}
}
};
p._kill = function(vars, target, overwritingTween) {
if (vars === "all") {
vars = null;
}
if (vars == null) if (target == null || target === this.target) {
this._lazy = false;
return this._enabled(false, false);
}
target = (typeof(target) !== "string") ? (target || this._targets || this.target) : TweenLite.selector(target) || target;
var simultaneousOverwrite = (overwritingTween && this._time && overwritingTween._startTime === this._startTime && this._timeline === overwritingTween._timeline),
i, overwrittenProps, p, pt, propLookup, changed, killProps, record, killed;
if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {
i = target.length;
while (--i > -1) {
if (this._kill(vars, target[i], overwritingTween)) {
changed = true;
}
}
} else {
if (this._targets) {
i = this._targets.length;
while (--i > -1) {
if (target === this._targets[i]) {
propLookup = this._propLookup[i] || {};
this._overwrittenProps = this._overwrittenProps || [];
overwrittenProps = this._overwrittenProps[i] = vars ? this._overwrittenProps[i] || {} : "all";
break;
}
}
} else if (target !== this.target) {
return false;
} else {
propLookup = this._propLookup;
overwrittenProps = this._overwrittenProps = vars ? this._overwrittenProps || {} : "all";
}
if (propLookup) {
killProps = vars || propLookup;
record = (vars !== overwrittenProps && overwrittenProps !== "all" && vars !== propLookup && (typeof(vars) !== "object" || !vars._tempKill)); //_tempKill is a super-secret way to delete a particular tweening property but NOT have it remembered as an official overwritten property (like in BezierPlugin)
if (overwritingTween && (TweenLite.onOverwrite || this.vars.onOverwrite)) {
for (p in killProps) {
if (propLookup[p]) {
if (!killed) {
killed = [];
}
killed.push(p);
}
}
if ((killed || !vars) && !_onOverwrite(this, overwritingTween, target, killed)) { //if the onOverwrite returned false, that means the user wants to override the overwriting (cancel it).
return false;
}
}
for (p in killProps) {
if ((pt = propLookup[p])) {
if (simultaneousOverwrite) { //if another tween overwrites this one and they both start at exactly the same time, yet this tween has already rendered once (for example, at 0.001) because it's first in the queue, we should revert the values to where they were at 0 so that the starting values aren't contaminated on the overwriting tween.
if (pt.f) {
pt.t[pt.p](pt.s);
} else {
pt.t[pt.p] = pt.s;
}
changed = true;
}
if (pt.pg && pt.t._kill(killProps)) {
changed = true; //some plugins need to be notified so they can perform cleanup tasks first
}
if (!pt.pg || pt.t._overwriteProps.length === 0) {
if (pt._prev) {
pt._prev._next = pt._next;
} else if (pt === this._firstPT) {
this._firstPT = pt._next;
}
if (pt._next) {
pt._next._prev = pt._prev;
}
pt._next = pt._prev = null;
}
delete propLookup[p];
}
if (record) {
overwrittenProps[p] = 1;
}
}
if (!this._firstPT && this._initted) { //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.
this._enabled(false, false);
}
}
}
return changed;
};
p.invalidate = function() {
if (this._notifyPluginsOfEnabled) {
TweenLite._onPluginEvent("_onDisable", this);
}
this._firstPT = this._overwrittenProps = this._startAt = this._onUpdate = null;
this._notifyPluginsOfEnabled = this._active = this._lazy = false;
this._propLookup = (this._targets) ? {} : [];
Animation.prototype.invalidate.call(this);
if (this.vars.immediateRender) {
this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
this.render(Math.min(0, -this._delay)); //in case delay is negative.
}
return this;
};
p._enabled = function(enabled, ignoreTimeline) {
if (!_tickerActive) {
_ticker.wake();
}
if (enabled && this._gc) {
var targets = this._targets,
i;
if (targets) {
i = targets.length;
while (--i > -1) {
this._siblings[i] = _register(targets[i], this, true);
}
} else {
this._siblings = _register(this.target, this, true);
}
}
Animation.prototype._enabled.call(this, enabled, ignoreTimeline);
if (this._notifyPluginsOfEnabled) if (this._firstPT) {
return TweenLite._onPluginEvent((enabled ? "_onEnable" : "_onDisable"), this);
}
return false;
};
//----TweenLite static methods -----------------------------------------------------
TweenLite.to = function(target, duration, vars) {
return new TweenLite(target, duration, vars);
};
TweenLite.from = function(target, duration, vars) {
vars.runBackwards = true;
vars.immediateRender = (vars.immediateRender != false);
return new TweenLite(target, duration, vars);
};
TweenLite.fromTo = function(target, duration, fromVars, toVars) {
toVars.startAt = fromVars;
toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);
return new TweenLite(target, duration, toVars);
};
TweenLite.delayedCall = function(delay, callback, params, scope, useFrames) {
return new TweenLite(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, callbackScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, immediateRender:false, lazy:false, useFrames:useFrames, overwrite:0});
};
TweenLite.set = function(target, vars) {
return new TweenLite(target, 0, vars);
};
TweenLite.getTweensOf = function(target, onlyActive) {
if (target == null) { return []; }
target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;
var i, a, j, t;
if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {
i = target.length;
a = [];
while (--i > -1) {
a = a.concat(TweenLite.getTweensOf(target[i], onlyActive));
}
i = a.length;
//now get rid of any duplicates (tweens of arrays of objects could cause duplicates)
while (--i > -1) {
t = a[i];
j = i;
while (--j > -1) {
if (t === a[j]) {
a.splice(i, 1);
}
}
}
} else {
a = _register(target).concat();
i = a.length;
while (--i > -1) {
if (a[i]._gc || (onlyActive && !a[i].isActive())) {
a.splice(i, 1);
}
}
}
return a;
};
TweenLite.killTweensOf = TweenLite.killDelayedCallsTo = function(target, onlyActive, vars) {
if (typeof(onlyActive) === "object") {
vars = onlyActive; //for backwards compatibility (before "onlyActive" parameter was inserted)
onlyActive = false;
}
var a = TweenLite.getTweensOf(target, onlyActive),
i = a.length;
while (--i > -1) {
a[i]._kill(vars, target);
}
};
/*
* ----------------------------------------------------------------
* TweenPlugin (could easily be split out as a separate file/class, but included for ease of use (so that people don't need to include another script call before loading plugins which is easy to forget)
* ----------------------------------------------------------------
*/
var TweenPlugin = _class("plugins.TweenPlugin", function(props, priority) {
this._overwriteProps = (props || "").split(",");
this._propName = this._overwriteProps[0];
this._priority = priority || 0;
this._super = TweenPlugin.prototype;
}, true);
p = TweenPlugin.prototype;
TweenPlugin.version = "1.19.0";
TweenPlugin.API = 2;
p._firstPT = null;
p._addTween = _addPropTween;
p.setRatio = _setRatio;
p._kill = function(lookup) {
var a = this._overwriteProps,
pt = this._firstPT,
i;
if (lookup[this._propName] != null) {
this._overwriteProps = [];
} else {
i = a.length;
while (--i > -1) {
if (lookup[a[i]] != null) {
a.splice(i, 1);
}
}
}
while (pt) {
if (lookup[pt.n] != null) {
if (pt._next) {
pt._next._prev = pt._prev;
}
if (pt._prev) {
pt._prev._next = pt._next;
pt._prev = null;
} else if (this._firstPT === pt) {
this._firstPT = pt._next;
}
}
pt = pt._next;
}
return false;
};
p._mod = p._roundProps = function(lookup) {
var pt = this._firstPT,
val;
while (pt) {
val = lookup[this._propName] || (pt.n != null && lookup[ pt.n.split(this._propName + "_").join("") ]);
if (val && typeof(val) === "function") { //some properties that are very plugin-specific add a prefix named after the _propName plus an underscore, so we need to ignore that extra stuff here.
if (pt.f === 2) {
pt.t._applyPT.m = val;
} else {
pt.m = val;
}
}
pt = pt._next;
}
};
TweenLite._onPluginEvent = function(type, tween) {
var pt = tween._firstPT,
changed, pt2, first, last, next;
if (type === "_onInitAllProps") {
//sorts the PropTween linked list in order of priority because some plugins need to render earlier/later than others, like MotionBlurPlugin applies its effects after all x/y/alpha tweens have rendered on each frame.
while (pt) {
next = pt._next;
pt2 = first;
while (pt2 && pt2.pr > pt.pr) {
pt2 = pt2._next;
}
if ((pt._prev = pt2 ? pt2._prev : last)) {
pt._prev._next = pt;
} else {
first = pt;
}
if ((pt._next = pt2)) {
pt2._prev = pt;
} else {
last = pt;
}
pt = next;
}
pt = tween._firstPT = first;
}
while (pt) {
if (pt.pg) if (typeof(pt.t[type]) === "function") if (pt.t[type]()) {
changed = true;
}
pt = pt._next;
}
return changed;
};
TweenPlugin.activate = function(plugins) {
var i = plugins.length;
while (--i > -1) {
if (plugins[i].API === TweenPlugin.API) {
_plugins[(new plugins[i]())._propName] = plugins[i];
}
}
return true;
};
//provides a more concise way to define plugins that have no dependencies besides TweenPlugin and TweenLite, wrapping common boilerplate stuff into one function (added in 1.9.0). You don't NEED to use this to define a plugin - the old way still works and can be useful in certain (rare) situations.
_gsDefine.plugin = function(config) {
if (!config || !config.propName || !config.init || !config.API) { throw "illegal plugin definition."; }
var propName = config.propName,
priority = config.priority || 0,
overwriteProps = config.overwriteProps,
map = {init:"_onInitTween", set:"setRatio", kill:"_kill", round:"_mod", mod:"_mod", initAll:"_onInitAllProps"},
Plugin = _class("plugins." + propName.charAt(0).toUpperCase() + propName.substr(1) + "Plugin",
function() {
TweenPlugin.call(this, propName, priority);
this._overwriteProps = overwriteProps || [];
}, (config.global === true)),
p = Plugin.prototype = new TweenPlugin(propName),
prop;
p.constructor = Plugin;
Plugin.API = config.API;
for (prop in map) {
if (typeof(config[prop]) === "function") {
p[map[prop]] = config[prop];
}
}
Plugin.version = config.version;
TweenPlugin.activate([Plugin]);
return Plugin;
};
//now run through all the dependencies discovered and if any are missing, log that to the console as a warning. This is why it's best to have TweenLite load last - it can check all the dependencies for you.
a = window._gsQueue;
if (a) {
for (i = 0; i < a.length; i++) {
a[i]();
}
for (p in _defLookup) {
if (!_defLookup[p].func) {
window.console.log("GSAP encountered missing dependency: " + p);
}
}
}
_tickerActive = false; //ensures that the first official animation forces a ticker.tick() to update the time when it is instantiated
})((typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window, "TweenLite");
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 2873 2874 2875 2876 2877 2878 2879 2880 2881 2882 2883 2884 2885 2886 2887 2888 2889 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901 2902 2903 2904 2905 2906 2907 2908 2909 2910 2911 2912 2913 2914 2915 2916 2917 2918 2919 2920 2921 2922 2923 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933 2934 2935 2936 2937 2938 2939 2940 2941 2942 2943 2944 2945 2946 2947 2948 2949 2950 2951 2952 2953 2954 2955 2956 2957 2958 2959 2960 2961 2962 2963 2964 2965 2966 2967 2968 2969 2970 2971 2972 2973 2974 2975 2976 2977 2978 2979 2980 2981 2982 2983 2984 2985 2986 2987 2988 2989 2990 2991 2992 2993 2994 2995 2996 2997 2998 2999 3000 3001 3002 3003 3004 3005 3006 3007 3008 3009 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024 3025 3026 3027 3028 3029 3030 3031 3032 3033 3034 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 3045 3046 3047 3048 3049 3050 3051 3052 3053 3054 3055 3056 3057 3058 3059 3060 3061 3062 3063 3064 3065 3066 3067 3068 3069 3070 3071 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086 3087 3088 3089 3090 3091 3092 3093 3094 3095 3096 3097 3098 3099 3100 3101 3102 3103 3104 3105 3106 3107 3108 3109 3110 3111 3112 3113 3114 3115 3116 3117 3118 3119 3120 3121 3122 3123 3124 3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175 3176 3177 3178 3179 3180 3181 3182 3183 3184 3185 3186 3187 3188 3189 3190 3191 3192 3193 3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 3236 3237 3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248 3249 3250 3251 3252 3253 3254 3255 3256 3257 3258 3259 3260 3261 3262 3263 3264 3265 3266 3267 3268 3269 3270 3271 3272 3273 3274 3275 3276 3277 3278 3279 3280 3281 3282 3283 3284 3285 3286 3287 3288 3289 3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307 3308 3309 3310 3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329 3330 3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348 3349 3350 3351 3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557 3558 3559 3560 3561 3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573 3574 3575 3576 3577 3578 3579 3580 3581 3582 3583 3584 3585 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609 3610 3611 3612 3613 3614 3615 3616 3617 3618 3619 3620 3621 3622 3623 3624 3625 3626 3627 3628 3629 3630 3631 3632 3633 3634 3635 3636 3637 3638 3639 3640 3641 3642 3643 3644 3645 3646 3647 3648 3649 3650 3651 3652 3653 3654 3655 3656 3657 3658 3659 3660 3661 3662 3663 3664 3665 3666 3667 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689 3690 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700 3701 3702 3703 3704 3705 3706 3707 3708 3709 3710 3711 3712 3713 3714 3715 3716 3717 3718 3719 3720 3721 3722 3723 3724 3725 3726 3727 3728 3729 3730 3731 3732 3733 3734 3735 3736 3737 3738 3739 3740 3741 3742 3743 3744 3745 3746 3747 3748 3749 3750 3751 3752 3753 3754 3755 3756 3757 3758 3759 3760 3761 3762 3763 3764 3765 3766 3767 3768 3769 3770 3771 3772 3773 3774 3775 3776 3777 3778 3779 3780 3781 3782 3783 3784 3785 3786 3787 3788 3789 3790 3791 3792 3793 3794 3795 3796 3797 3798 3799 3800 3801 3802 3803 3804 3805 3806 3807 3808 3809 3810 3811 3812 3813 3814 3815 3816 3817 3818 3819 3820 3821 3822 3823 3824 3825 3826 3827 3828 3829 3830 3831 3832 3833 3834 3835 3836 3837 3838 3839 3840 3841 3842 3843 3844 3845 3846 3847 3848 3849 3850 3851 3852 3853 3854 3855 3856 3857 3858 3859 3860 3861 3862 3863 3864 3865 3866 3867 3868 3869 3870 3871 3872 3873 3874 3875 3876 3877 3878 3879 3880 3881 3882 3883 3884 3885 3886 3887 3888 3889 3890 3891 3892 3893 3894 3895 3896 3897 3898 3899 3900 3901 3902 3903 3904 3905 3906 3907 3908 3909 3910 3911 3912 3913 3914 3915 3916 3917 3918 3919 3920 3921 3922 3923 3924 3925 3926 3927 3928 3929 3930 3931 3932 3933 3934 3935 3936 3937 3938 3939 3940 3941 3942 3943 3944 3945 3946 3947 3948 3949 3950 3951 3952 3953 3954 3955 3956 3957 3958 3959 3960 3961 3962 3963 3964 3965 3966 3967 3968 3969 3970 3971 3972 3973 3974 3975 3976 3977 3978 3979 3980 3981 3982 3983 3984 3985 3986 3987 3988 3989 3990 3991 3992 3993 3994 3995 3996 3997 3998 3999 4000 4001 4002 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019 4020 4021 4022 4023 4024 4025 4026 4027 4028 4029 4030 4031 4032 4033 4034 4035 4036 4037 4038 4039 4040 4041 4042 4043 4044 4045 4046 4047 4048 4049 4050 4051 4052 4053 4054 4055 4056 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067 4068 4069 4070 4071 4072 4073 4074 4075 4076 4077 4078 4079 4080 4081 4082 4083 4084 4085 4086 4087 4088 4089 4090 4091 4092 4093 4094 4095 4096 4097 4098 4099 4100 4101 4102 4103 4104 4105 4106 4107 4108 4109 4110 4111 4112 4113 4114 4115 4116 4117 4118 4119 4120 4121 4122 4123 4124 4125 4126 4127 4128 4129 4130 4131 4132 4133 4134 4135 4136 4137 4138 4139 4140 4141 4142 4143 4144 4145 4146 4147 4148 4149 4150 4151 4152 4153 4154 4155 4156 4157 4158 4159 4160 4161 4162 4163 4164 4165 4166 4167 4168 4169 4170 4171 4172 4173 4174 4175 4176 4177 4178 4179 4180 4181 4182 4183 4184 4185 4186 4187 4188 4189 4190 4191 4192 4193 4194 4195 4196 4197 4198 4199 4200 4201 4202 4203 4204 4205 4206 4207 4208 4209 4210 4211 4212 4213 4214 4215 4216 4217 4218 4219 4220 4221 4222 4223 4224 4225 4226 4227 4228 4229 4230 4231 4232 4233 4234 4235 4236 4237 4238 4239 4240 4241 4242 4243 4244 4245 4246 4247 4248 4249 4250 4251 4252 4253 4254 4255 4256 4257 4258 4259 4260 4261 4262 4263 4264 4265 4266 4267 4268 4269 4270 4271 4272 4273 4274 4275 4276 4277 4278 4279 4280 4281 4282 4283 4284 4285 4286 4287 4288 4289 4290 4291 4292 4293 4294 4295 4296 4297 4298 4299 4300 4301 4302 4303 4304 4305 4306 4307 4308 4309 4310 4311 4312 4313 4314 4315 4316 4317 4318 4319 4320 4321 4322 4323 4324 4325 4326 4327 4328 4329 4330 4331 4332 4333 4334 4335 4336 4337 4338 4339 4340 4341 4342 4343 4344 4345 4346 4347 4348 4349 4350 4351 4352 4353 4354 4355 4356 4357 4358 4359 4360 4361 4362 4363 4364 4365 4366 4367 4368 4369 4370 4371 4372 4373 4374 4375 4376 4377 4378 4379 4380 4381 4382 4383 4384 4385 4386 4387 4388 4389 4390 4391 4392 4393 4394 4395 4396 4397 4398 4399 4400 4401 4402 4403 4404 4405 4406 4407 4408 4409 4410 4411 4412 4413 4414 4415 4416 4417 4418 4419 4420 4421 4422 4423 4424 4425 4426 4427 4428 4429 4430 4431 4432 4433 4434 4435 4436 4437 4438 4439 4440 4441 4442 4443 4444 4445 4446 4447 4448 4449 4450 4451 4452 4453 4454 4455 4456 4457 4458 4459 4460 4461 4462 4463 4464 4465 4466 4467 4468 4469 4470 4471 4472 4473 4474 4475 4476 4477 4478 4479 4480 4481 4482 4483 4484 4485 4486 4487 4488 4489 4490 4491 4492 4493 4494 4495 4496 4497 4498 4499 4500 4501 4502 4503 4504 4505 4506 4507 4508 4509 4510 4511 4512 4513 4514 4515 4516 4517 4518 4519 4520 4521 4522 4523 4524 4525 4526 4527 4528 4529 4530 4531 4532 4533 4534 4535 4536 4537 4538 4539 4540 4541 4542 4543 4544 4545 4546 4547 4548 4549 4550 4551 4552 4553 4554 4555 4556 4557 4558 4559 4560 4561 4562 4563 4564 4565 4566 4567 4568 4569 4570 4571 4572 4573 4574 4575 4576 4577 4578 4579 4580 4581 4582 4583 4584 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595 4596 4597 4598 4599 4600 4601 4602 4603 4604 4605 4606 4607 4608 4609 4610 4611 4612 4613 4614 4615 4616 4617 4618 4619 4620 4621 4622 4623 4624 4625 4626 4627 4628 4629 4630 4631 4632 4633 4634 4635 4636 4637 4638 4639 4640 4641 4642 4643 4644 4645 4646 4647 4648 4649 4650 4651 4652 4653 4654 4655 4656 4657 4658 4659 4660 4661 4662 4663 4664 4665 4666 4667 4668 4669 4670 4671 4672 4673 4674 4675 4676 4677 4678 4679 4680 4681 4682 4683 4684 4685 4686 4687 4688 4689 4690 4691 4692 4693 4694 4695 4696 4697 4698 4699 4700 4701 4702 4703 4704 4705 4706 4707 4708 4709 4710 4711 4712 4713 4714 4715 4716 4717 4718 4719 4720 4721 4722 4723 4724 4725 4726 4727 4728 4729 4730 4731 4732 4733 4734 4735 4736 4737 4738 4739 4740 4741 4742 4743 4744 4745 4746 4747 4748 4749 4750 4751 4752 4753 4754 4755 4756 4757 4758 4759 4760 4761 4762 4763 4764 4765 4766 4767 4768 4769 4770 4771 4772 4773 4774 4775 4776 4777 4778 4779 4780 4781 4782 4783 4784 4785 4786 4787 4788 4789 4790 4791 4792 4793 4794 4795 4796 4797 4798 4799 4800 4801 4802 4803 4804 4805 4806 4807 4808 4809 4810 4811 4812 4813 4814 4815 4816 4817 4818 4819 4820 4821 4822 4823 4824 4825 4826 4827 4828 4829 4830 4831 4832 4833 4834 4835 4836 4837 4838 4839 4840 4841 4842 4843 4844 4845 4846 4847 4848 4849 4850 4851 4852 4853 4854 4855 4856 4857 4858 4859 4860 4861 4862 4863 4864 4865 4866 4867 4868 4869 4870 4871 4872 4873 4874 4875 4876 4877 4878 4879 4880 4881 4882 4883 4884 4885 4886 4887 4888 4889 4890 4891 4892 4893 4894 4895 4896 4897 4898 4899 4900 4901 4902 4903 4904 4905 4906 4907 4908 4909 4910 4911 4912 4913 4914 4915 4916 4917 4918 4919 4920 4921 4922 4923 4924 4925 4926 4927 4928 4929 4930 4931 4932 4933 4934 4935 4936 4937 4938 4939 4940 4941 4942 4943 4944 4945 4946 4947 4948 4949 4950 4951 4952 4953 4954 4955 4956 4957 4958 4959 4960 4961 4962 4963 4964 4965 4966 4967 4968 4969 4970 4971 4972 4973 4974 4975 4976 4977 4978 4979 4980 4981 4982 4983 4984 4985 4986 4987 4988 4989 4990 4991 4992 4993 4994 4995 4996 4997 4998 4999 5000 5001 5002 5003 5004 5005 5006 5007 5008 5009 5010 5011 5012 5013 5014 5015 5016 5017 5018 5019 5020 5021 5022 5023 5024 5025 5026 5027 5028 5029 5030 5031 5032 5033 5034 5035 5036 5037 5038 5039 5040 5041 5042 5043 5044 5045 5046 5047 5048 5049 5050 5051 5052 5053 5054 5055 5056 5057 5058 5059 5060 5061 5062 5063 5064 5065 5066 5067 5068 5069 5070 5071 5072 5073 5074 5075 5076 5077 5078 5079 5080 5081 5082 5083 5084 5085 5086 5087 5088 5089 5090 5091 5092 5093 5094 5095 5096 5097 5098 5099 5100 5101 5102 5103 5104 5105 5106 5107 5108 5109 5110 5111 5112 5113 5114 5115 5116 5117 5118 5119 5120 5121 5122 5123 5124 5125 5126 5127 5128 5129 5130 5131 5132 5133 5134 5135 5136 5137 5138 5139 5140 5141 5142 5143 5144 5145 5146 5147 5148 5149 5150 5151 5152 5153 5154 5155 5156 5157 5158 5159 5160 5161 5162 5163 5164 5165 5166 5167 5168 5169 5170 5171 5172 5173 5174 5175 5176 5177 5178 5179 5180 5181 5182 5183 5184 5185 5186 5187 5188 5189 5190 5191 5192 5193 5194 5195 5196 5197 5198 5199 5200 5201 5202 5203 5204 5205 5206 5207 5208 5209 5210 5211 5212 5213 5214 5215 5216 5217 5218 5219 5220 5221 5222 5223 5224 5225 5226 5227 5228 5229 5230 5231 5232 5233 5234 5235 5236 5237 5238 5239 5240 5241 5242 5243 5244 5245 5246 5247 5248 5249 5250 5251 5252 5253 5254 5255 5256 5257 5258 5259 5260 5261 5262 5263 5264 5265 5266 5267 5268 5269 5270 5271 5272 5273 5274 5275 5276 5277 5278 5279 5280 5281 5282 5283 5284 5285 5286 5287 5288 5289 5290 5291 5292 5293 5294 5295 5296 5297 5298 5299 5300 5301 5302 5303 5304 5305 5306 5307 5308 5309 5310 5311 5312 5313 5314 5315 5316 5317 5318 5319 5320 5321 5322 5323 5324 5325 5326 5327 5328 5329 5330 5331 5332 5333 5334 5335 5336 5337 5338 5339 5340 5341 5342 5343 5344 5345 5346 5347 5348 5349 5350 5351 5352 5353 5354 5355 5356 5357 5358 5359 5360 5361 5362 5363 5364 5365 5366 5367 5368 5369 5370 5371 5372 5373 5374 5375 5376 5377 5378 5379 5380 5381 5382 5383 5384 5385 5386 5387 5388 5389 5390 5391 5392 5393 5394 5395 5396 5397 5398 5399 5400 5401 5402 5403 5404 5405 5406 5407 5408 5409 5410 5411 5412 5413 5414 5415 5416 5417 5418 5419 5420 5421 5422 5423 5424 5425 5426 5427 5428 5429 5430 5431 5432 5433 5434 5435 5436 5437 5438 5439 5440 5441 5442 5443 5444 5445 5446 5447 5448 5449 5450 5451 5452 5453 5454 5455 5456 5457 5458 5459 5460 5461 5462 5463 5464 5465 5466 5467 5468 5469 5470 5471 5472 5473 5474 5475 5476 5477 5478 5479 5480 5481 5482 5483 5484 5485 5486 5487 5488 5489 5490 5491 5492 5493 5494 5495 5496 5497 5498 5499 5500 5501 5502 5503 5504 5505 5506 5507 5508 5509 5510 5511 5512 5513 5514 5515 5516 5517 5518 5519 5520 5521 5522 5523 5524 5525 5526 5527 5528 5529 5530 5531 5532 5533 5534 5535 5536 5537 5538 5539 5540 5541 5542 5543 5544 5545 5546 5547 5548 5549 5550 5551 5552 5553 5554 5555 5556 5557 5558 5559 5560 5561 5562 5563 5564 5565 5566 5567 5568 5569 5570 5571 5572 5573 5574 5575 5576 5577 5578 5579 5580 5581 5582 5583 5584 5585 5586 5587 5588 5589 5590 5591 5592 5593 5594 5595 5596 5597 5598 5599 5600 5601 5602 5603 5604 5605 5606 5607 5608 5609 5610 5611 5612 5613 5614 5615 5616 5617 5618 5619 5620 5621 5622 5623 5624 5625 5626 5627 5628 5629 5630 5631 5632 5633 5634 5635 5636 5637 5638 5639 5640 5641 5642 5643 5644 5645 5646 5647 5648 5649 5650 5651 5652 5653 5654 5655 5656 5657 5658 5659 5660 5661 5662 5663 5664 5665 5666 5667 5668 5669 5670 5671 5672 5673 5674 5675 5676 5677 5678 5679 5680 5681 5682 5683 5684 5685 5686 5687 5688 5689 5690 5691 5692 5693 5694 5695 5696 5697 5698 5699 5700 5701 5702 5703 5704 5705 5706 5707 5708 5709 5710 5711 5712 5713 5714 5715 5716 5717 5718 5719 5720 5721 5722 5723 5724 5725 5726 5727 5728 5729 5730 5731 5732 5733 5734 5735 5736 5737 5738 5739 5740 5741 5742 5743 5744 5745 5746 5747 5748 5749 5750 5751 5752 5753 5754 5755 5756 5757 5758 5759 5760 5761 5762 5763 5764 5765 5766 5767 5768 5769 5770 5771 5772 5773 5774 5775 5776 5777 5778 5779 5780 5781 5782 5783 5784 5785 5786 5787 5788 5789 5790 5791 5792 5793 5794 5795 5796 5797 5798 5799 5800 5801 5802 5803 5804 5805 5806 5807 5808 5809 5810 5811 5812 5813 5814 5815 5816 5817 5818 5819 5820 5821 5822 5823 5824 5825 5826 5827 5828 5829 5830 5831 5832 5833 5834 5835 5836 5837 5838 5839 5840 5841 5842 5843 5844 5845 5846 5847 5848 5849 5850 5851 5852 5853 5854 5855 5856 5857 5858 5859 5860 5861 5862 5863 5864 5865 5866 5867 5868 5869 5870 5871 5872 5873 5874 5875 5876 5877 5878 5879 5880 5881 5882 5883 5884 5885 5886 5887 5888 5889 5890 5891 5892 5893 5894 5895 5896 5897 5898 5899 5900 5901 5902 5903 5904 5905 5906 5907 5908 5909 5910 5911 5912 5913 5914 5915 5916 5917 5918 5919 5920 5921 5922 5923 5924 5925 5926 5927 5928 5929 5930 5931 5932 5933 5934 5935 5936 5937 5938 5939 5940 5941 5942 5943 5944 5945 5946 5947 5948 5949 5950 5951 5952 5953 5954 5955 5956 5957 5958 5959 5960 5961 5962 5963 5964 5965 5966 5967 5968 5969 5970 5971 5972 5973 5974 5975 5976 5977 5978 5979 5980 5981 5982 5983 5984 5985 5986 5987 5988 5989 5990 5991 5992 5993 5994 5995 5996 5997 5998 5999 6000 6001 6002 6003 6004 6005 6006 6007 6008 6009 6010 6011 6012 6013 6014 6015 6016 6017 6018 6019 6020 6021 6022 6023 6024 6025 6026 6027 6028 6029 6030 6031 6032 6033 6034 6035 6036 6037 6038 6039 6040 6041 6042 6043 6044 6045 6046 6047 6048 6049 6050 6051 6052 6053 6054 6055 6056 6057 6058 6059 6060 6061 6062 6063 6064 6065 6066 6067 6068 6069 6070 6071 6072 6073 6074 6075 6076 6077 6078 6079 6080 6081 6082 6083 6084 6085 6086 6087 6088 6089 6090 6091 6092 6093 6094 6095 6096 6097 6098 6099 6100 6101 6102 6103 6104 6105 6106 6107 6108 6109 6110 6111 6112 6113 6114 6115 6116 6117 6118 6119 6120 6121 6122 6123 6124 6125 6126 6127 6128 6129 6130 6131 6132 6133 6134 6135 6136 6137 6138 6139 6140 6141 6142 6143 6144 6145 6146 6147 6148 6149 6150 6151 6152 6153 6154 6155 6156 6157 6158 6159 6160 6161 6162 6163 6164 6165 6166 6167 6168 6169 6170 6171 6172 6173 6174 6175 6176 6177 6178 6179 6180 6181 6182 6183 6184 6185 6186 6187 6188 6189 6190 6191 6192 6193 6194 6195 6196 6197 6198 6199 6200 6201 6202 6203 6204 6205 6206 6207 6208 6209 6210 6211 6212 6213 6214 6215 6216 6217 6218 6219 6220 6221 6222 6223 6224 6225 6226 6227 6228 6229 6230 6231 6232 6233 6234 6235 6236 6237 6238 6239 6240 6241 6242 6243 6244 6245 6246 6247 6248 6249 6250 6251 6252 6253 6254 6255 6256 6257 6258 6259 6260 6261 6262 6263 6264 6265 6266 6267 6268 6269 6270 6271 6272 6273 6274 6275 6276 6277 6278 6279 6280 6281 6282 6283 6284 6285 6286 6287 6288 6289 6290 6291 6292 6293 6294 6295 6296 6297 6298 6299 6300 6301 6302 6303 6304 6305 6306 6307 6308 6309 6310 6311 6312 6313 6314 6315 6316 6317 6318 6319 6320 6321 6322 6323 6324 6325 6326 6327 6328 6329 6330 6331 6332 6333 6334 6335 6336 6337 6338 6339 6340 6341 6342 6343 6344 6345 6346 6347 6348 6349 6350 6351 6352 6353 6354 6355 6356 6357 6358 6359 6360 6361 6362 6363 6364 6365 6366 6367 6368 6369 6370 6371 6372 6373 6374 6375 6376 6377 6378 6379 6380 6381 6382 6383 6384 6385 6386 6387 6388 6389 6390 6391 6392 6393 6394 6395 6396 6397 6398 6399 6400 6401 6402 6403 6404 6405 6406 6407 6408 6409 6410 6411 6412 6413 6414 6415 6416 6417 6418 6419 6420 6421 6422 6423 6424 6425 6426 6427 6428 6429 6430 6431 6432 6433 6434 6435 6436 6437 6438 6439 6440 6441 6442 6443 6444 6445 6446 6447 6448 6449 6450 6451 6452 6453 6454 6455 6456 6457 6458 6459 6460 6461 6462 6463 6464 6465 6466 6467 6468 6469 6470 6471 6472 6473 6474 6475 6476 6477 6478 6479 6480 6481 6482 6483 6484 6485 6486 6487 6488 6489 6490 6491 6492 6493 6494 6495 6496 6497 6498 6499 6500 6501 6502 6503 6504 6505 6506 6507 6508 6509 6510 6511 6512 6513 6514 6515 6516 6517 6518 6519 6520 6521 6522 6523 6524 6525 6526 6527 6528 6529 6530 6531 6532 6533 6534 6535 6536 6537 6538 6539 6540 6541 6542 6543 6544 6545 6546 6547 6548 6549 6550 6551 6552 6553 6554 6555 6556 6557 6558 6559 6560 6561 6562 6563 6564 6565 6566 6567 6568 6569 6570 6571 6572 6573 6574 6575 6576 6577 6578 6579 6580 6581 6582 6583 6584 6585 6586 6587 6588 6589 6590 6591 6592 6593 6594 6595 6596 6597 6598 6599 6600 6601 6602 6603 6604 6605 6606 6607 6608 6609 6610 6611 6612 6613 6614 6615 6616 6617 6618 6619 6620 6621 6622 6623 6624 6625 6626 6627 6628 6629 6630 6631 6632 6633 6634 6635 6636 6637 6638 6639 6640 6641 6642 6643 6644 6645 6646 6647 6648 6649 6650 6651 6652 6653 6654 6655 6656 6657 6658 6659 6660 6661 6662 6663 6664 6665 6666 6667 6668 6669 6670 6671 6672 6673 6674 6675 6676 6677 6678 6679 6680 6681 6682 6683 6684 6685 6686 6687 6688 6689 6690 6691 6692 6693 6694 6695 6696 6697 6698 6699 6700 6701 6702 6703 6704 6705 6706 6707 6708 6709 6710 6711 6712 6713 6714 6715 6716 6717 6718 6719 6720 6721 6722 6723 6724 6725 6726 6727 6728 6729 6730 6731 6732 6733 6734 6735 6736 6737 6738 6739 6740 6741 6742 6743 6744 6745 6746 6747 6748 6749 6750 6751 6752 6753 6754 6755 6756 6757 6758 6759 6760 6761 6762 6763 6764 6765 6766 6767 6768 6769 6770 6771 6772 6773 6774 6775 6776 6777 6778 6779 6780 6781 6782 6783 6784 6785 6786 6787 6788 6789 6790 6791 6792 6793 6794 6795 6796 6797 6798 6799 6800 6801 6802 6803 6804 6805 6806 6807 6808 6809 6810 6811 6812 6813 6814 6815 6816 6817 6818 6819 6820 6821 6822 6823 6824 6825 6826 6827 6828 6829 6830 6831 6832 6833 6834 6835 6836 6837 6838 6839 6840 6841 6842 6843 6844 6845 6846 6847 6848 6849 6850 6851 6852 6853 6854 6855 6856 6857 6858 6859 6860 6861 6862 6863 6864 6865 6866 6867 6868 6869 6870 6871 6872 6873 6874 6875 6876 6877 6878 6879 6880 6881 6882 6883 6884 6885 6886 6887 6888 6889 6890 6891 6892 6893 6894 6895 6896 6897 6898 6899 6900 6901 6902 6903 6904 6905 6906 6907 6908 6909 6910 6911 6912 6913 6914 6915 6916 6917 6918 6919 6920 6921 6922 6923 6924 6925 6926 6927 6928 6929 6930 6931 6932 6933 6934 6935 6936 6937 6938 6939 6940 6941 6942 6943 6944 6945 6946 6947 6948 6949 6950 6951 6952 6953 6954 6955 6956 6957 6958 6959 6960 6961 6962 6963 6964 6965 6966 6967 6968 6969 6970 6971 6972 6973 6974 6975 6976 6977 6978 6979 6980 6981 6982 6983 6984 6985 6986 6987 6988 6989 6990 6991 6992 6993 6994 6995 6996 6997 6998 6999 7000 7001 7002 7003 7004 7005 7006 7007 7008 7009 7010 7011 7012 7013 7014 7015 7016 7017 7018 7019 7020 7021 7022 7023 7024 7025 7026 7027 7028 7029 7030 7031 7032 7033 7034 7035 7036 7037 7038 7039 7040 7041 7042 7043 7044 7045 7046 7047 7048 7049 7050 7051 7052 7053 7054 7055 7056 7057 7058 7059 7060 7061 7062 7063 7064 7065 7066 7067 7068 7069 7070 7071 7072 7073 7074 7075 7076 7077 7078 7079 7080 7081 7082 7083 7084 7085 7086 7087 7088 7089 7090 7091 7092 7093 7094 7095 7096 7097 7098 7099 7100 7101 7102 7103 7104 7105 7106 7107 7108 7109 7110 7111 7112 7113 7114 7115 7116 7117 7118 7119 7120 7121 7122 7123 7124 7125 7126 7127 7128 7129 7130 7131 7132 7133 7134 7135 7136 7137 7138 7139 7140 7141 7142 7143 7144 7145 7146 7147 7148 7149 7150 7151 7152 7153 7154 7155 7156 7157 7158 7159 7160 7161 7162 7163 7164 7165 7166 7167 7168 7169 7170 7171 7172 7173 7174 7175 7176 7177 7178 7179 7180 7181 7182 7183 7184 7185 7186 7187 7188 7189 7190 7191 7192 7193 7194 7195 7196 7197 7198 7199 7200 7201 7202 7203 7204 7205 7206 7207 7208 7209 7210 7211 7212 7213 7214 7215 7216 7217 7218 7219 7220 7221 7222 7223 7224 7225 7226 7227 7228 7229 7230 7231 7232 7233 7234 7235 7236 7237 7238 7239 7240 7241 7242 7243 7244 7245 7246 7247 7248 7249 7250 7251 7252 7253 7254 7255 7256 7257 7258 7259 7260 7261 7262 7263 7264 7265 7266 7267 7268 7269 7270 7271 7272 7273 7274 7275 7276 7277 7278 7279 7280 7281 7282 7283 7284 7285 7286 7287 7288 7289 7290 7291 7292 7293 7294 7295 7296 7297 7298 7299 7300 7301 7302 7303 7304 7305 7306 7307 7308 7309 7310 7311 7312 7313 7314 7315 7316 7317 7318 7319 7320 7321 7322 7323 7324 7325 7326 7327 7328 7329 7330 7331 7332 7333 7334 7335 7336 7337 7338 7339 7340 7341 7342 7343 7344 7345 7346 7347 7348 7349 7350 7351 7352 7353 7354 7355 7356 7357 7358 7359 7360 7361 7362 7363 7364 7365 7366 7367 7368 7369 7370 7371 7372 7373 7374 7375 7376 7377 7378 7379 7380 7381 7382 7383 7384 7385 7386 7387 7388 7389 7390 7391 7392 7393 7394 7395 7396 7397 7398 7399 7400 7401 7402 7403 7404 7405 7406 7407 7408 7409 7410 7411 7412 7413 7414 7415 7416 7417 7418 7419 7420 7421 7422 7423 7424 7425 7426 7427 7428 7429 7430 7431 7432 7433 7434 7435 7436 7437 7438 7439 7440 7441 7442 7443 7444 7445 7446 7447 7448 7449 7450 7451 7452 7453 7454 7455 7456 7457 7458 7459 7460 7461 7462 7463 7464 7465 7466 7467 7468 7469 7470 7471 7472 7473 7474 7475 7476 7477 7478 7479 7480 7481 7482 7483 7484 7485 7486 7487 7488 7489 7490 7491 7492 7493 7494 7495 7496 7497 7498 7499 7500 7501 7502 7503 7504 7505 7506 7507 7508 7509 7510 7511 7512 7513 7514 7515 7516 7517 7518 7519 7520 7521 7522 7523 7524 7525 7526 7527 7528 7529 7530 7531 7532 7533 7534 7535 7536 7537 7538 7539 7540 7541 7542 7543 7544 7545 7546 7547 7548 7549 7550 7551 7552 7553 7554 7555 7556 7557 7558 7559 7560 7561 7562 7563 7564 7565 7566 7567 7568 7569 7570 7571 7572 7573 7574 7575 7576 7577 7578 7579 7580 7581 7582 7583 7584 7585 7586 7587 7588 7589 7590 7591 7592 7593 7594 7595 7596 7597 7598 7599 7600 7601 7602 7603 7604 7605 7606 7607 7608 7609 7610 7611 7612 7613 7614 7615 7616 7617 7618 7619 7620 7621 7622 7623 7624 7625 7626 7627 7628 7629 7630 7631 7632 7633 7634 7635 7636 7637 7638 7639 7640 7641 7642 7643 7644 7645 7646 7647 7648 7649 7650 7651 7652 7653 7654 7655 7656 7657 7658 7659 7660 7661 7662 7663 7664 7665 7666 7667 7668 7669 7670 7671 7672 7673 7674 7675 7676 7677 7678 7679 7680 7681 7682 7683 7684 7685 7686 7687 7688 7689 7690 7691 7692 7693 7694 7695 7696 7697 7698 7699 7700 7701 7702 7703 7704 7705 7706 7707 7708 7709 7710 7711 7712 7713 7714 7715 7716 7717 7718 7719 7720 7721 7722 7723 7724 7725 7726 7727 7728 7729 7730 7731 7732 7733 7734 7735 7736 7737 7738 7739 7740 7741 7742 7743 7744 7745 7746 7747 7748 7749 7750 7751 7752 7753 7754 7755 7756 7757 7758 7759 7760 7761 7762 7763 7764 7765 7766 7767 7768 7769 7770 7771 7772 7773 7774 7775 7776 7777 7778 7779 7780 7781 7782 7783 7784 7785 7786 7787 7788 7789 7790 7791 7792 7793 7794 7795 7796 7797 7798 7799 7800 7801 7802 7803 7804 7805 7806 7807 7808 7809 7810 7811 7812 7813 7814 7815 7816 7817 7818 7819 7820 7821 7822 7823 7824 7825 7826 7827 7828 7829 7830 7831 7832 7833 7834 7835 7836 7837 7838 7839 7840 7841 7842 7843 7844 7845 7846 7847 7848 7849 7850 7851 7852 7853 7854 7855 7856 7857 7858 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 3 3 1 1 1 1 1 1 1 1 12 12 12 12 12 12 12 12 12 1 20 1 1 1 1 1 55 45 10 10 10 2 2 8 8 3 3 1 1 1 8 8 1 1 1 1 61 61 61 61 61 53 61 61 61 61 61 26 26 26 26 61 61 61 4 4 4 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 4 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 12 12 12 12 6 6 6 44 44 44 42 42 42 42 3 3 3 3 3 3 3 2 2 1 1 2 2 2 2 2 1 1 1 1 1 2 2 2 1 1 1 1 1 2 2 2 40 40 40 40 40 40 40 40 2 161 2 2 2 40 40 2 1 1 1 1 1 1 1 1 3 3 3 3 3 3 3 3 3 1 1 1 1 1 1 1 1 1 1 1 1 1 178 178 522 178 1 1 3 177 177 177 177 177 177 177 177 55 55 55 177 177 177 177 173 149 149 149 149 149 2 2 64 147 133 173 177 177 155 155 155 1 1 103 103 103 103 51 51 69 69 69 69 131 131 1 1 1 1 1 1 5 5 5 5 1 1 1 2 2 1 1 1 1 1 1 1 1 1 1 1 1 3 3 1 1 1 1 1 1 1 1 1 1 1 1 4 4 1 1 3 3 1 3 3 3 3 3 3 3 3 3 3 3 1 1 1 1 1 3 3 1 3 3 3 3 2 3 1 1 1 1 1 1 1 1 1 1 1 1 13 13 13 13 13 13 13 13 4 9 1 9 9 9 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 11 11 1 11 1 11 11 11 11 11 9 11 1 6 1 11 11 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 9 9 1 1 1 1 1 1 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 1 9 9 9 9 9 9 9 9 9 9 9 9 9 1 2 2 2 1 1 2 2 2 2 2 2 2 2 2 2 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 1 1 1 1 2 2 2 2 1 1 2 2 2 2 2 1 2 1 1 1 1 1 1 1 60 60 60 60 1 1 1 1 1 1 1 1 1 1 30 30 30 30 30 1 25 25 25 25 25 25 25 150 44 25 25 25 1 1 1 1 1 54 1 | /*! * VERSION: 1.19.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) { var _slice = function(a) { //don't use [].slice because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, _applyCycle = function(vars, targets, i) { var alt = vars.cycle, p, val; for (p in alt) { val = alt[p]; vars[p] = (typeof(val) === "function") ? val(i, targets[i]) : val[i % val.length]; } delete vars.cycle; }, TweenMax = function(target, duration, vars) { TweenLite.call(this, target, duration, vars); this._cycle = 0; this._yoyo = (this.vars.yoyo === true); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._dirty = true; //ensures that if there is any repeat, the totalDuration will get recalculated to accurately report it. this.render = TweenMax.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method) }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _isSelector = TweenLiteInternals.isSelector, _isArray = TweenLiteInternals.isArray, p = TweenMax.prototype = TweenLite.to({}, 0.1, {}), _blankArray = []; TweenMax.version = "1.19.1"; p.constructor = TweenMax; p.kill()._gc = false; TweenMax.killTweensOf = TweenMax.killDelayedCallsTo = TweenLite.killTweensOf; TweenMax.getTweensOf = TweenLite.getTweensOf; TweenMax.lagSmoothing = TweenLite.lagSmoothing; TweenMax.ticker = TweenLite.ticker; TweenMax.render = TweenLite.render; p.invalidate = function() { this._yoyo = (this.vars.yoyo === true); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._uncache(true); return TweenLite.prototype.invalidate.call(this); }; p.updateTo = function(vars, resetDuration) { var curRatio = this.ratio, immediate = this.vars.immediateRender || vars.immediateRender, p; if (resetDuration && this._startTime < this._timeline._time) { this._startTime = this._timeline._time; this._uncache(false); if (this._gc) { this._enabled(true, false); } else { this._timeline.insert(this, this._startTime - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct. } } for (p in vars) { this.vars[p] = vars[p]; } if (this._initted || immediate) { if (resetDuration) { this._initted = false; if (immediate) { this.render(0, true, true); } } else { if (this._gc) { this._enabled(true, false); } if (this._notifyPluginsOfEnabled && this._firstPT) { TweenLite._onPluginEvent("_onDisable", this); //in case a plugin like MotionBlur must perform some cleanup tasks } if (this._time / this._duration > 0.998) { //if the tween has finished (or come extremely close to finishing), we just need to rewind it to 0 and then render it again at the end which forces it to re-initialize (parsing the new vars). We allow tweens that are close to finishing (but haven't quite finished) to work this way too because otherwise, the values are so small when determining where to project the starting values that binary math issues creep in and can make the tween appear to render incorrectly when run backwards. var prevTime = this._totalTime; this.render(0, true, false); this._initted = false; this.render(prevTime, true, false); } else { this._initted = false; this._init(); if (this._time > 0 || immediate) { var inv = 1 / (1 - curRatio), pt = this._firstPT, endValue; while (pt) { endValue = pt.s + pt.c; pt.c *= inv; pt.s = endValue - pt.c; pt = pt._next; } } } } } return this; }; p.render = function(time, suppressEvents, force) { if (!this._initted) if (this._duration === 0 && this.vars.repeat) { //zero duration tweens that render immediately have render() called from TweenLite's constructor, before TweenMax's constructor has finished setting _repeat, _repeatDelay, and _yoyo which are critical in determining totalDuration() so we need to call invalidate() which is a low-kb way to get those set properly. this.invalidate(); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), prevTime = this._time, prevTotalTime = this._totalTime, prevCycle = this._cycle, duration = this._duration, prevRawPrevTime = this._rawPrevTime, isComplete, callback, pt, cycleDuration, r, type, pow, rawPrevTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = totalDur; this._cycle = this._repeat; if (this._yoyo && (this._cycle & 1) !== 0) { this._time = 0; this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0; } else { this._time = duration; this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1; } if (!this._reversed) { isComplete = true; callback = "onComplete"; force = (force || this._timeline.autoRemoveChildren); //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. } if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate. time = 0; } if (prevRawPrevTime < 0 || (time <= 0 && time >= -0.0000001) || (prevRawPrevTime === _tinyNum && this.data !== "isPause")) if (prevRawPrevTime !== time) { //note: when this.data is "isPause", it's a callback added by addPause() on a timeline that we should not be triggered when LEAVING its exact start time. In other words, tl.addPause(1).play(1) shouldn't pause. force = true; if (prevRawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = this._cycle = 0; this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0; if (prevTotalTime !== 0 || (duration === 0 && prevRawPrevTime > 0)) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (prevRawPrevTime >= 0) { force = true; } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately. force = true; } } else { this._totalTime = this._time = time; if (this._repeat !== 0) { cycleDuration = duration + this._repeatDelay; this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!) if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration && prevTotalTime <= time) { this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning) } this._time = this._totalTime - (this._cycle * cycleDuration); if (this._yoyo) if ((this._cycle & 1) !== 0) { this._time = duration - this._time; } if (this._time > duration) { this._time = duration; } else if (this._time < 0) { this._time = 0; } } if (this._easeType) { r = this._time / duration; type = this._easeType; pow = this._easePower; if (type === 1 || (type === 3 && r >= 0.5)) { r = 1 - r; } if (type === 3) { r *= 2; } if (pow === 1) { r *= r; } else if (pow === 2) { r *= r * r; } else if (pow === 3) { r *= r * r * r; } else if (pow === 4) { r *= r * r * r * r; } if (type === 1) { this.ratio = 1 - r; } else if (type === 2) { this.ratio = r; } else if (this._time / duration < 0.5) { this.ratio = r / 2; } else { this.ratio = 1 - (r / 2); } } else { this.ratio = this._ease.getRatio(this._time / duration); } } if (prevTime === this._time && !force && prevCycle === this._cycle) { if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate. this._callback("onUpdate"); } return; } else if (!this._initted) { this._init(); if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example. return; } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) { //we stick it in the queue for rendering at the very end of the tick - this is a performance optimization because browsers invalidate styles and force a recalculation if you read, write, and then read style data (so it's better to read/read/read/write/write/write than read/write/read/write/read/write). The down side, of course, is that usually you WANT things to render immediately because you may have code running right after that which depends on the change. Like imagine running TweenLite.set(...) and then immediately after that, creating a nother tween that animates the same property to another value; the starting values of that 2nd tween wouldn't be accurate if lazy is true. this._time = prevTime; this._totalTime = prevTotalTime; this._rawPrevTime = prevRawPrevTime; this._cycle = prevCycle; TweenLiteInternals.lazyTweens.push(this); this._lazy = [time, suppressEvents]; return; } //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently. if (this._time && !isComplete) { this.ratio = this._ease.getRatio(this._time / duration); } else if (isComplete && this._ease._calcEnd) { this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1); } } if (this._lazy !== false) { this._lazy = false; } if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) { this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done. } if (prevTotalTime === 0) { if (this._initted === 2 && time > 0) { //this.invalidate(); this._init(); //will just apply overwriting since _initted of (2) means it was a from() tween that had immediateRender:true } if (this._startAt) { if (time >= 0) { this._startAt.render(time, suppressEvents, force); } else if (!callback) { callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area. } } if (this.vars.onStart) if (this._totalTime !== 0 || duration === 0) if (!suppressEvents) { this._callback("onStart"); } } pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](pt.c * this.ratio + pt.s); } else { pt.t[pt.p] = pt.c * this.ratio + pt.s; } pt = pt._next; } if (this._onUpdate) { if (time < 0) if (this._startAt && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values. this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete. } if (!suppressEvents) if (this._totalTime !== prevTotalTime || callback) { this._callback("onUpdate"); } } if (this._cycle !== prevCycle) if (!suppressEvents) if (!this._gc) if (this.vars.onRepeat) { this._callback("onRepeat"); } if (callback) if (!this._gc || force) { //check gc because there's a chance that kill() could be called in an onUpdate if (time < 0 && this._startAt && !this._onUpdate && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values. this._startAt.render(time, suppressEvents, force); } if (isComplete) { if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless. this._rawPrevTime = 0; } } }; //---- STATIC FUNCTIONS ----------------------------------------------------------------------------------------------------------- TweenMax.to = function(target, duration, vars) { return new TweenMax(target, duration, vars); }; TweenMax.from = function(target, duration, vars) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return new TweenMax(target, duration, vars); }; TweenMax.fromTo = function(target, duration, fromVars, toVars) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return new TweenMax(target, duration, toVars); }; TweenMax.staggerTo = TweenMax.allTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { stagger = stagger || 0; var delay = 0, a = [], finalComplete = function() { if (vars.onComplete) { vars.onComplete.apply(vars.onCompleteScope || this, arguments); } onCompleteAll.apply(onCompleteAllScope || vars.callbackScope || this, onCompleteAllParams || _blankArray); }, cycle = vars.cycle, fromCycle = (vars.startAt && vars.startAt.cycle), l, copy, i, p; if (!_isArray(targets)) { if (typeof(targets) === "string") { targets = TweenLite.selector(targets) || targets; } if (_isSelector(targets)) { targets = _slice(targets); } } targets = targets || []; if (stagger < 0) { targets = _slice(targets); targets.reverse(); stagger *= -1; } l = targets.length - 1; for (i = 0; i <= l; i++) { copy = {}; for (p in vars) { copy[p] = vars[p]; } if (cycle) { _applyCycle(copy, targets, i); if (copy.duration != null) { duration = copy.duration; delete copy.duration; } } if (fromCycle) { fromCycle = copy.startAt = {}; for (p in vars.startAt) { fromCycle[p] = vars.startAt[p]; } _applyCycle(copy.startAt, targets, i); } copy.delay = delay + (copy.delay || 0); if (i === l && onCompleteAll) { copy.onComplete = finalComplete; } a[i] = new TweenMax(targets[i], duration, copy); delay += stagger; } return a; }; TweenMax.staggerFrom = TweenMax.allFrom = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return TweenMax.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; TweenMax.staggerFromTo = TweenMax.allFromTo = function(targets, duration, fromVars, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return TweenMax.staggerTo(targets, duration, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; TweenMax.delayedCall = function(delay, callback, params, scope, useFrames) { return new TweenMax(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, callbackScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, immediateRender:false, useFrames:useFrames, overwrite:0}); }; TweenMax.set = function(target, vars) { return new TweenMax(target, 0, vars); }; TweenMax.isTweening = function(target) { return (TweenLite.getTweensOf(target, true).length > 0); }; var _getChildrenOf = function(timeline, includeTimelines) { var a = [], cnt = 0, tween = timeline._first; while (tween) { if (tween instanceof TweenLite) { a[cnt++] = tween; } else { if (includeTimelines) { a[cnt++] = tween; } a = a.concat(_getChildrenOf(tween, includeTimelines)); cnt = a.length; } tween = tween._next; } return a; }, getAllTweens = TweenMax.getAllTweens = function(includeTimelines) { return _getChildrenOf(Animation._rootTimeline, includeTimelines).concat( _getChildrenOf(Animation._rootFramesTimeline, includeTimelines) ); }; TweenMax.killAll = function(complete, tweens, delayedCalls, timelines) { if (tweens == null) { tweens = true; } if (delayedCalls == null) { delayedCalls = true; } var a = getAllTweens((timelines != false)), l = a.length, allTrue = (tweens && delayedCalls && timelines), isDC, tween, i; for (i = 0; i < l; i++) { tween = a[i]; if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) { if (complete) { tween.totalTime(tween._reversed ? 0 : tween.totalDuration()); } else { tween._enabled(false, false); } } } }; TweenMax.killChildTweensOf = function(parent, complete) { if (parent == null) { return; } var tl = TweenLiteInternals.tweenLookup, a, curParent, p, i, l; if (typeof(parent) === "string") { parent = TweenLite.selector(parent) || parent; } if (_isSelector(parent)) { parent = _slice(parent); } if (_isArray(parent)) { i = parent.length; while (--i > -1) { TweenMax.killChildTweensOf(parent[i], complete); } return; } a = []; for (p in tl) { curParent = tl[p].target.parentNode; while (curParent) { if (curParent === parent) { a = a.concat(tl[p].tweens); } curParent = curParent.parentNode; } } l = a.length; for (i = 0; i < l; i++) { if (complete) { a[i].totalTime(a[i].totalDuration()); } a[i]._enabled(false, false); } }; var _changePause = function(pause, tweens, delayedCalls, timelines) { tweens = (tweens !== false); delayedCalls = (delayedCalls !== false); timelines = (timelines !== false); var a = getAllTweens(timelines), allTrue = (tweens && delayedCalls && timelines), i = a.length, isDC, tween; while (--i > -1) { tween = a[i]; if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) { tween.paused(pause); } } }; TweenMax.pauseAll = function(tweens, delayedCalls, timelines) { _changePause(true, tweens, delayedCalls, timelines); }; TweenMax.resumeAll = function(tweens, delayedCalls, timelines) { _changePause(false, tweens, delayedCalls, timelines); }; TweenMax.globalTimeScale = function(value) { var tl = Animation._rootTimeline, t = TweenLite.ticker.time; if (!arguments.length) { return tl._timeScale; } value = value || _tinyNum; //can't allow zero because it'll throw the math off tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value); tl = Animation._rootFramesTimeline; t = TweenLite.ticker.frame; tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value); tl._timeScale = Animation._rootTimeline._timeScale = value; return value; }; //---- GETTERS / SETTERS ---------------------------------------------------------------------------------------------------------- p.progress = function(value, suppressEvents) { return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents); }; p.totalProgress = function(value, suppressEvents) { return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, suppressEvents); }; p.time = function(value, suppressEvents) { if (!arguments.length) { return this._time; } if (this._dirty) { this.totalDuration(); } if (value > this._duration) { value = this._duration; } if (this._yoyo && (this._cycle & 1) !== 0) { value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay)); } else if (this._repeat !== 0) { value += this._cycle * (this._duration + this._repeatDelay); } return this.totalTime(value, suppressEvents); }; p.duration = function(value) { if (!arguments.length) { return this._duration; //don't set _dirty = false because there could be repeats that haven't been factored into the _totalDuration yet. Otherwise, if you create a repeated TweenMax and then immediately check its duration(), it would cache the value and the totalDuration would not be correct, thus repeats wouldn't take effect. } return Animation.prototype.duration.call(this, value); }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { //instead of Infinity, we use 999999999999 so that we can accommodate reverses this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat); this._dirty = false; } return this._totalDuration; } return (this._repeat === -1) ? this : this.duration( (value - (this._repeat * this._repeatDelay)) / (this._repeat + 1) ); }; p.repeat = function(value) { if (!arguments.length) { return this._repeat; } this._repeat = value; return this._uncache(true); }; p.repeatDelay = function(value) { if (!arguments.length) { return this._repeatDelay; } this._repeatDelay = value; return this._uncache(true); }; p.yoyo = function(value) { if (!arguments.length) { return this._yoyo; } this._yoyo = value; return this; }; return TweenMax; }, true); /* * ---------------------------------------------------------------- * TimelineLite * ---------------------------------------------------------------- */ _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) { var TimelineLite = function(vars) { SimpleTimeline.call(this, vars); this._labels = {}; this.autoRemoveChildren = (this.vars.autoRemoveChildren === true); this.smoothChildTiming = (this.vars.smoothChildTiming === true); this._sortChildren = true; this._onUpdate = this.vars.onUpdate; var v = this.vars, val, p; for (p in v) { val = v[p]; if (_isArray(val)) if (val.join("").indexOf("{self}") !== -1) { v[p] = this._swapSelfInParams(val); } } Iif (_isArray(v.tweens)) { this.add(v.tweens, 0, v.align, v.stagger); } }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _internals = TimelineLite._internals = {}, _isSelector = TweenLiteInternals.isSelector, _isArray = TweenLiteInternals.isArray, _lazyTweens = TweenLiteInternals.lazyTweens, _lazyRender = TweenLiteInternals.lazyRender, _globals = _gsScope._gsDefine.globals, _copy = function(vars) { var copy = {}, p; for (p in vars) { copy[p] = vars[p]; } return copy; }, _applyCycle = function(vars, targets, i) { var alt = vars.cycle, p, val; for (p in alt) { val = alt[p]; vars[p] = (typeof(val) === "function") ? val(i, targets[i]) : val[i % val.length]; } delete vars.cycle; }, _pauseCallback = _internals.pauseCallback = function() {}, _slice = function(a) { //don't use [].slice because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, p = TimelineLite.prototype = new SimpleTimeline(); TimelineLite.version = "1.19.1"; p.constructor = TimelineLite; p.kill()._gc = p._forcingPlayhead = p._hasPause = false; /* might use later... //translates a local time inside an animation to the corresponding time on the root/global timeline, factoring in all nesting and timeScales. function localToGlobal(time, animation) { while (animation) { time = (time / animation._timeScale) + animation._startTime; animation = animation.timeline; } return time; } //translates the supplied time on the root/global timeline into the corresponding local time inside a particular animation, factoring in all nesting and timeScales function globalToLocal(time, animation) { var scale = 1; time -= localToGlobal(0, animation); while (animation) { scale *= animation._timeScale; animation = animation.timeline; } return time * scale; } */ p.to = function(target, duration, vars, position) { var Engine = (vars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( new Engine(target, duration, vars), position) : this.set(target, vars, position); }; p.from = function(target, duration, vars, position) { return this.add( ((vars.repeat && _globals.TweenMax) || TweenLite).from(target, duration, vars), position); }; p.fromTo = function(target, duration, fromVars, toVars, position) { var Engine = (toVars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( Engine.fromTo(target, duration, fromVars, toVars), position) : this.set(target, toVars, position); }; p.staggerTo = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { var tl = new TimelineLite({onComplete:onCompleteAll, onCompleteParams:onCompleteAllParams, callbackScope:onCompleteAllScope, smoothChildTiming:this.smoothChildTiming}), cycle = vars.cycle, copy, i; if (typeof(targets) === "string") { targets = TweenLite.selector(targets) || targets; } targets = targets || []; if (_isSelector(targets)) { //senses if the targets object is a selector. If it is, we should translate it into an array. targets = _slice(targets); } stagger = stagger || 0; if (stagger < 0) { targets = _slice(targets); targets.reverse(); stagger *= -1; } for (i = 0; i < targets.length; i++) { copy = _copy(vars); if (copy.startAt) { copy.startAt = _copy(copy.startAt); if (copy.startAt.cycle) { _applyCycle(copy.startAt, targets, i); } } if (cycle) { _applyCycle(copy, targets, i); if (copy.duration != null) { duration = copy.duration; delete copy.duration; } } tl.to(targets[i], duration, copy, i * stagger); } return this.add(tl, position); }; p.staggerFrom = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { vars.immediateRender = (vars.immediateRender != false); vars.runBackwards = true; return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.staggerFromTo = function(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.call = function(callback, params, scope, position) { return this.add( TweenLite.delayedCall(0, callback, params, scope), position); }; p.set = function(target, vars, position) { position = this._parseTimeOrLabel(position, 0, true); if (vars.immediateRender == null) { vars.immediateRender = (position === this._time && !this._paused); } return this.add( new TweenLite(target, 0, vars), position); }; TimelineLite.exportRoot = function(vars, ignoreDelayedCalls) { vars = vars || {}; if (vars.smoothChildTiming == null) { vars.smoothChildTiming = true; } var tl = new TimelineLite(vars), root = tl._timeline, tween, next; if (ignoreDelayedCalls == null) { ignoreDelayedCalls = true; } root._remove(tl, true); tl._startTime = 0; tl._rawPrevTime = tl._time = tl._totalTime = root._time; tween = root._first; while (tween) { next = tween._next; if (!ignoreDelayedCalls || !(tween instanceof TweenLite && tween.target === tween.vars.onComplete)) { tl.add(tween, tween._startTime - tween._delay); } tween = next; } root.add(tl, 0); return tl; }; p.add = function(value, position, align, stagger) { var curTime, l, i, child, tl, beforeRawTime; if (typeof(position) !== "number") { position = this._parseTimeOrLabel(position, 0, true, value); } if (!(value instanceof Animation)) { if ((value instanceof Array) || (value && value.push && _isArray(value))) { align = align || "normal"; stagger = stagger || 0; curTime = position; l = value.length; for (i = 0; i < l; i++) { if (_isArray(child = value[i])) { child = new TimelineLite({tweens:child}); } this.add(child, curTime); if (typeof(child) !== "string" && typeof(child) !== "function") { if (align === "sequence") { curTime = child._startTime + (child.totalDuration() / child._timeScale); } else if (align === "start") { child._startTime -= child.delay(); } } curTime += stagger; } return this._uncache(true); } else if (typeof(value) === "string") { return this.addLabel(value, position); } else if (typeof(value) === "function") { value = TweenLite.delayedCall(0, value); } else { throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string."); } } SimpleTimeline.prototype.add.call(this, value, position); //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate. if (this._gc || this._time === this._duration) if (!this._paused) if (this._duration < this.duration()) { //in case any of the ancestors had completed but should now be enabled... tl = this; beforeRawTime = (tl.rawTime() > value._startTime); //if the tween is placed on the timeline so that it starts BEFORE the current rawTime, we should align the playhead (move the timeline). This is because sometimes users will create a timeline, let it finish, and much later append a tween and expect it to run instead of jumping to its end state. While technically one could argue that it should jump to its end state, that's not what users intuitively expect. while (tl._timeline) { if (beforeRawTime && tl._timeline.smoothChildTiming) { tl.totalTime(tl._totalTime, true); //moves the timeline (shifts its startTime) if necessary, and also enables it. } else if (tl._gc) { tl._enabled(true, false); } tl = tl._timeline; } } return this; }; p.remove = function(value) { if (value instanceof Animation) { this._remove(value, false); var tl = value._timeline = value.vars.useFrames ? Animation._rootFramesTimeline : Animation._rootTimeline; //now that it's removed, default it to the root timeline so that if it gets played again, it doesn't jump back into this timeline. value._startTime = (value._paused ? value._pauseTime : tl._time) - ((!value._reversed ? value._totalTime : value.totalDuration() - value._totalTime) / value._timeScale); //ensure that if it gets played again, the timing is correct. return this; } else if (value instanceof Array || (value && value.push && _isArray(value))) { var i = value.length; while (--i > -1) { this.remove(value[i]); } return this; } else if (typeof(value) === "string") { return this.removeLabel(value); } return this.kill(null, value); }; p._remove = function(tween, skipDisable) { SimpleTimeline.prototype._remove.call(this, tween, skipDisable); var last = this._last; if (!last) { this._time = this._totalTime = this._duration = this._totalDuration = 0; } else if (this._time > this.duration()) { this._time = this._duration; this._totalTime = this._totalDuration; } return this; }; p.append = function(value, offsetOrLabel) { return this.add(value, this._parseTimeOrLabel(null, offsetOrLabel, true, value)); }; p.insert = p.insertMultiple = function(value, position, align, stagger) { return this.add(value, position || 0, align, stagger); }; p.appendMultiple = function(tweens, offsetOrLabel, align, stagger) { return this.add(tweens, this._parseTimeOrLabel(null, offsetOrLabel, true, tweens), align, stagger); }; p.addLabel = function(label, position) { this._labels[label] = this._parseTimeOrLabel(position); return this; }; p.addPause = function(position, callback, params, scope) { var t = TweenLite.delayedCall(0, _pauseCallback, params, scope || this); t.vars.onComplete = t.vars.onReverseComplete = callback; t.data = "isPause"; this._hasPause = true; return this.add(t, position); }; p.removeLabel = function(label) { delete this._labels[label]; return this; }; p.getLabelTime = function(label) { return (this._labels[label] != null) ? this._labels[label] : -1; }; p._parseTimeOrLabel = function(timeOrLabel, offsetOrLabel, appendIfAbsent, ignore) { var i; //if we're about to add a tween/timeline (or an array of them) that's already a child of this timeline, we should remove it first so that it doesn't contaminate the duration(). if (ignore instanceof Animation && ignore.timeline === this) { this.remove(ignore); } else if (ignore && ((ignore instanceof Array) || (ignore.push && _isArray(ignore)))) { i = ignore.length; while (--i > -1) { if (ignore[i] instanceof Animation && ignore[i].timeline === this) { this.remove(ignore[i]); } } } if (typeof(offsetOrLabel) === "string") { return this._parseTimeOrLabel(offsetOrLabel, (appendIfAbsent && typeof(timeOrLabel) === "number" && this._labels[offsetOrLabel] == null) ? timeOrLabel - this.duration() : 0, appendIfAbsent); } offsetOrLabel = offsetOrLabel || 0; if (typeof(timeOrLabel) === "string" && (isNaN(timeOrLabel) || this._labels[timeOrLabel] != null)) { //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value). i = timeOrLabel.indexOf("="); if (i === -1) { if (this._labels[timeOrLabel] == null) { return appendIfAbsent ? (this._labels[timeOrLabel] = this.duration() + offsetOrLabel) : offsetOrLabel; } return this._labels[timeOrLabel] + offsetOrLabel; } offsetOrLabel = parseInt(timeOrLabel.charAt(i-1) + "1", 10) * Number(timeOrLabel.substr(i+1)); timeOrLabel = (i > 1) ? this._parseTimeOrLabel(timeOrLabel.substr(0, i-1), 0, appendIfAbsent) : this.duration(); } else if (timeOrLabel == null) { timeOrLabel = this.duration(); } return Number(timeOrLabel) + offsetOrLabel; }; p.seek = function(position, suppressEvents) { return this.totalTime((typeof(position) === "number") ? position : this._parseTimeOrLabel(position), (suppressEvents !== false)); }; p.stop = function() { return this.paused(true); }; p.gotoAndPlay = function(position, suppressEvents) { return this.play(position, suppressEvents); }; p.gotoAndStop = function(position, suppressEvents) { return this.pause(position, suppressEvents); }; p.render = function(time, suppressEvents, force) { if (this._gc) { this._enabled(true, false); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), prevTime = this._time, prevStart = this._startTime, prevTimeScale = this._timeScale, prevPaused = this._paused, tween, isComplete, next, callback, internalForce, pauseTween, curTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = this._time = totalDur; if (!this._reversed) if (!this._hasPausedChild()) { isComplete = true; callback = "onComplete"; internalForce = !!this._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. if (this._duration === 0) if ((time <= 0 && time >= -0.0000001) || this._rawPrevTime < 0 || this._rawPrevTime === _tinyNum) if (this._rawPrevTime !== time && this._first) { internalForce = true; if (this._rawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } } this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. time = totalDur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = 0; if (prevTime !== 0 || (this._duration === 0 && this._rawPrevTime !== _tinyNum && (this._rawPrevTime > 0 || (time < 0 && this._rawPrevTime >= 0)))) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (this._timeline.autoRemoveChildren && this._reversed) { //ensures proper GC if a timeline is resumed after it's finished reversing. internalForce = isComplete = true; callback = "onReverseComplete"; } else if (this._rawPrevTime >= 0 && this._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state. internalForce = true; } this._rawPrevTime = time; } else { this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good). tween = this._first; while (tween && tween._startTime === 0) { if (!tween._duration) { isComplete = false; } tween = tween._next; } } time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline) if (!this._initted) { internalForce = true; } } } else { if (this._hasPause && !this._forcingPlayhead && !suppressEvents) { if (time >= prevTime) { tween = this._first; while (tween && tween._startTime <= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && this._rawPrevTime === 0)) { pauseTween = tween; } tween = tween._next; } } else { tween = this._last; while (tween && tween._startTime >= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) { pauseTween = tween; } tween = tween._prev; } } if (pauseTween) { this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } } this._totalTime = this._time = this._rawPrevTime = time; } if ((this._time === prevTime || !this._first) && !force && !internalForce && !pauseTween) { return; } else if (!this._initted) { this._initted = true; } if (!this._active) if (!this._paused && this._time !== prevTime && time > 0) { this._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example. } if (prevTime === 0) if (this.vars.onStart) if (this._time !== 0 || !this._duration) if (!suppressEvents) { this._callback("onStart"); } curTime = this._time; if (curTime >= prevTime) { tween = this._first; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= curTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } else { tween = this._last; while (tween) { next = tween._prev; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse. while (pauseTween && pauseTween.endTime() > this._time) { pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force); pauseTween = pauseTween._prev; } pauseTween = null; this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } if (this._onUpdate) if (!suppressEvents) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values. _lazyRender(); } this._callback("onUpdate"); } if (callback) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate if (isComplete) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values. _lazyRender(); } if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } } }; p._hasPausedChild = function() { var tween = this._first; while (tween) { if (tween._paused || ((tween instanceof TimelineLite) && tween._hasPausedChild())) { return true; } tween = tween._next; } return false; }; p.getChildren = function(nested, tweens, timelines, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || -9999999999; var a = [], tween = this._first, cnt = 0; while (tween) { if (tween._startTime < ignoreBeforeTime) { //do nothing } else if (tween instanceof TweenLite) { if (tweens !== false) { a[cnt++] = tween; } } else { if (timelines !== false) { a[cnt++] = tween; } if (nested !== false) { a = a.concat(tween.getChildren(true, tweens, timelines)); cnt = a.length; } } tween = tween._next; } return a; }; p.getTweensOf = function(target, nested) { var disabled = this._gc, a = [], cnt = 0, tweens, i; if (disabled) { this._enabled(true, true); //getTweensOf() filters out disabled tweens, and we have to mark them as _gc = true when the timeline completes in order to allow clean garbage collection, so temporarily re-enable the timeline here. } tweens = TweenLite.getTweensOf(target); i = tweens.length; while (--i > -1) { if (tweens[i].timeline === this || (nested && this._contains(tweens[i]))) { a[cnt++] = tweens[i]; } } if (disabled) { this._enabled(false, true); } return a; }; p.recent = function() { return this._recent; }; p._contains = function(tween) { var tl = tween.timeline; while (tl) { if (tl === this) { return true; } tl = tl.timeline; } return false; }; p.shiftChildren = function(amount, adjustLabels, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || 0; var tween = this._first, labels = this._labels, p; while (tween) { if (tween._startTime >= ignoreBeforeTime) { tween._startTime += amount; } tween = tween._next; } if (adjustLabels) { for (p in labels) { if (labels[p] >= ignoreBeforeTime) { labels[p] += amount; } } } return this._uncache(true); }; p._kill = function(vars, target) { Eif (!vars && !target) { return this._enabled(false, false); } var tweens = (!target) ? this.getChildren(true, true, false) : this.getTweensOf(target), i = tweens.length, changed = false; while (--i > -1) { if (tweens[i]._kill(vars, target)) { changed = true; } } return changed; }; p.clear = function(labels) { var tweens = this.getChildren(false, true, true), i = tweens.length; this._time = this._totalTime = 0; while (--i > -1) { tweens[i]._enabled(false, false); } if (labels !== false) { this._labels = {}; } return this._uncache(true); }; p.invalidate = function() { var tween = this._first; while (tween) { tween.invalidate(); tween = tween._next; } return Animation.prototype.invalidate.call(this);; }; p._enabled = function(enabled, ignoreTimeline) { Eif (enabled === this._gc) { var tween = this._first; while (tween) { tween._enabled(enabled, true); tween = tween._next; } } return SimpleTimeline.prototype._enabled.call(this, enabled, ignoreTimeline); }; p.totalTime = function(time, suppressEvents, uncapped) { this._forcingPlayhead = true; var val = Animation.prototype.totalTime.apply(this, arguments); this._forcingPlayhead = false; return val; }; p.duration = function(value) { if (!arguments.length) { if (this._dirty) { this.totalDuration(); //just triggers recalculation } return this._duration; } if (this.duration() !== 0 && value !== 0) { this.timeScale(this._duration / value); } return this; }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { var max = 0, tween = this._last, prevStart = 999999999999, prev, end; while (tween) { prev = tween._prev; //record it here in case the tween changes position in the sequence... if (tween._dirty) { tween.totalDuration(); //could change the tween._startTime, so make sure the tween's cache is clean before analyzing it. } if (tween._startTime > prevStart && this._sortChildren && !tween._paused) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence this.add(tween, tween._startTime - tween._delay); } else { prevStart = tween._startTime; } if (tween._startTime < 0 && !tween._paused) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found. max -= tween._startTime; if (this._timeline.smoothChildTiming) { this._startTime += tween._startTime / this._timeScale; } this.shiftChildren(-tween._startTime, false, -9999999999); prevStart = 0; } end = tween._startTime + (tween._totalDuration / tween._timeScale); if (end > max) { max = end; } tween = prev; } this._duration = this._totalDuration = max; this._dirty = false; } return this._totalDuration; } return (value && this.totalDuration()) ? this.timeScale(this._totalDuration / value) : this; }; p.paused = function(value) { if (!value) { //if there's a pause directly at the spot from where we're unpausing, skip it. var tween = this._first, time = this._time; while (tween) { if (tween._startTime === time && tween.data === "isPause") { tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire. } tween = tween._next; } } return Animation.prototype.paused.apply(this, arguments); }; p.usesFrames = function() { var tl = this._timeline; while (tl._timeline) { tl = tl._timeline; } return (tl === Animation._rootFramesTimeline); }; p.rawTime = function(wrapRepeats) { return (wrapRepeats && (this._paused || (this._repeat && this.time() > 0 && this.totalProgress() < 1))) ? this._totalTime % (this._duration + this._repeatDelay) : this._paused ? this._totalTime : (this._timeline.rawTime(wrapRepeats) - this._startTime) * this._timeScale; }; return TimelineLite; }, true); /* * ---------------------------------------------------------------- * TimelineMax * ---------------------------------------------------------------- */ _gsScope._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], function(TimelineLite, TweenLite, Ease) { var TimelineMax = function(vars) { TimelineLite.call(this, vars); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._cycle = 0; this._yoyo = (this.vars.yoyo === true); this._dirty = true; }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _lazyTweens = TweenLiteInternals.lazyTweens, _lazyRender = TweenLiteInternals.lazyRender, _globals = _gsScope._gsDefine.globals, _easeNone = new Ease(null, null, 1, 0), p = TimelineMax.prototype = new TimelineLite(); p.constructor = TimelineMax; p.kill()._gc = false; TimelineMax.version = "1.19.1"; p.invalidate = function() { this._yoyo = (this.vars.yoyo === true); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._uncache(true); return TimelineLite.prototype.invalidate.call(this); }; p.addCallback = function(callback, position, params, scope) { return this.add( TweenLite.delayedCall(0, callback, params, scope), position); }; p.removeCallback = function(callback, position) { if (callback) { if (position == null) { this._kill(null, callback); } else { var a = this.getTweensOf(callback, false), i = a.length, time = this._parseTimeOrLabel(position); while (--i > -1) { if (a[i]._startTime === time) { a[i]._enabled(false, false); } } } } return this; }; p.removePause = function(position) { return this.removeCallback(TimelineLite._internals.pauseCallback, position); }; p.tweenTo = function(position, vars) { vars = vars || {}; var copy = {ease:_easeNone, useFrames:this.usesFrames(), immediateRender:false}, Engine = (vars.repeat && _globals.TweenMax) || TweenLite, duration, p, t; for (p in vars) { copy[p] = vars[p]; } copy.time = this._parseTimeOrLabel(position); duration = (Math.abs(Number(copy.time) - this._time) / this._timeScale) || 0.001; t = new Engine(this, duration, copy); copy.onStart = function() { t.target.paused(true); if (t.vars.time !== t.target.time() && duration === t.duration()) { //don't make the duration zero - if it's supposed to be zero, don't worry because it's already initting the tween and will complete immediately, effectively making the duration zero anyway. If we make duration zero, the tween won't run at all. t.duration( Math.abs( t.vars.time - t.target.time()) / t.target._timeScale ); } if (vars.onStart) { //in case the user had an onStart in the vars - we don't want to overwrite it. vars.onStart.apply(vars.onStartScope || vars.callbackScope || t, vars.onStartParams || []); //don't use t._callback("onStart") or it'll point to the copy.onStart and we'll get a recursion error. } }; return t; }; p.tweenFromTo = function(fromPosition, toPosition, vars) { vars = vars || {}; fromPosition = this._parseTimeOrLabel(fromPosition); vars.startAt = {onComplete:this.seek, onCompleteParams:[fromPosition], callbackScope:this}; vars.immediateRender = (vars.immediateRender !== false); var t = this.tweenTo(toPosition, vars); return t.duration((Math.abs( t.vars.time - fromPosition) / this._timeScale) || 0.001); }; p.render = function(time, suppressEvents, force) { if (this._gc) { this._enabled(true, false); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), dur = this._duration, prevTime = this._time, prevTotalTime = this._totalTime, prevStart = this._startTime, prevTimeScale = this._timeScale, prevRawPrevTime = this._rawPrevTime, prevPaused = this._paused, prevCycle = this._cycle, tween, isComplete, next, callback, internalForce, cycleDuration, pauseTween, curTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. if (!this._locked) { this._totalTime = totalDur; this._cycle = this._repeat; } if (!this._reversed) if (!this._hasPausedChild()) { isComplete = true; callback = "onComplete"; internalForce = !!this._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. if (this._duration === 0) if ((time <= 0 && time >= -0.0000001) || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time && this._first) { internalForce = true; if (prevRawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } } this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (this._yoyo && (this._cycle & 1) !== 0) { this._time = time = 0; } else { this._time = dur; time = dur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. We cannot do less then 0.0001 because the same issue can occur when the duration is extremely large like 999999999999 in which case adding 0.00000001, for example, causes it to act like nothing was added. } } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. if (!this._locked) { this._totalTime = this._cycle = 0; } this._time = 0; if (prevTime !== 0 || (dur === 0 && prevRawPrevTime !== _tinyNum && (prevRawPrevTime > 0 || (time < 0 && prevRawPrevTime >= 0)) && !this._locked)) { //edge case for checking time < 0 && prevRawPrevTime >= 0: a zero-duration fromTo() tween inside a zero-duration timeline (yeah, very rare) callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (this._timeline.autoRemoveChildren && this._reversed) { internalForce = isComplete = true; callback = "onReverseComplete"; } else if (prevRawPrevTime >= 0 && this._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state. internalForce = true; } this._rawPrevTime = time; } else { this._rawPrevTime = (dur || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good). tween = this._first; while (tween && tween._startTime === 0) { if (!tween._duration) { isComplete = false; } tween = tween._next; } } time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline) if (!this._initted) { internalForce = true; } } } else { if (dur === 0 && prevRawPrevTime < 0) { //without this, zero-duration repeating timelines (like with a simple callback nested at the very beginning and a repeatDelay) wouldn't render the first time through. internalForce = true; } this._time = this._rawPrevTime = time; if (!this._locked) { this._totalTime = time; if (this._repeat !== 0) { cycleDuration = dur + this._repeatDelay; this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but it gets reported as 0.79999999!) if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration && prevTotalTime <= time) { this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning) } this._time = this._totalTime - (this._cycle * cycleDuration); if (this._yoyo) if ((this._cycle & 1) !== 0) { this._time = dur - this._time; } if (this._time > dur) { this._time = dur; time = dur + 0.0001; //to avoid occasional floating point rounding error } else if (this._time < 0) { this._time = time = 0; } else { time = this._time; } } } if (this._hasPause && !this._forcingPlayhead && !suppressEvents && time < dur) { time = this._time; if (time >= prevTime || (this._repeat && prevCycle !== this._cycle)) { tween = this._first; while (tween && tween._startTime <= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && this._rawPrevTime === 0)) { pauseTween = tween; } tween = tween._next; } } else { tween = this._last; while (tween && tween._startTime >= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) { pauseTween = tween; } tween = tween._prev; } } if (pauseTween) { this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } } } if (this._cycle !== prevCycle) if (!this._locked) { /* make sure children at the end/beginning of the timeline are rendered properly. If, for example, a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which would get transated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must ensure that zero-duration tweens at the very beginning or end of the TimelineMax work. */ var backwards = (this._yoyo && (prevCycle & 1) !== 0), wrap = (backwards === (this._yoyo && (this._cycle & 1) !== 0)), recTotalTime = this._totalTime, recCycle = this._cycle, recRawPrevTime = this._rawPrevTime, recTime = this._time; this._totalTime = prevCycle * dur; if (this._cycle < prevCycle) { backwards = !backwards; } else { this._totalTime += dur; } this._time = prevTime; //temporarily revert _time so that render() renders the children in the correct order. Without this, tweens won't rewind correctly. We could arhictect things in a "cleaner" way by splitting out the rendering queue into a separate method but for performance reasons, we kept it all inside this method. this._rawPrevTime = (dur === 0) ? prevRawPrevTime - 0.0001 : prevRawPrevTime; this._cycle = prevCycle; this._locked = true; //prevents changes to totalTime and skips repeat/yoyo behavior when we recursively call render() prevTime = (backwards) ? 0 : dur; this.render(prevTime, suppressEvents, (dur === 0)); if (!suppressEvents) if (!this._gc) { if (this.vars.onRepeat) { this._cycle = recCycle; //in case the onRepeat alters the playhead or invalidates(), we shouldn't stay locked or use the previous cycle. this._locked = false; this._callback("onRepeat"); } } if (prevTime !== this._time) { //in case there's a callback like onComplete in a nested tween/timeline that changes the playhead position, like via seek(), we should just abort. return; } if (wrap) { this._cycle = prevCycle; //if there's an onRepeat, we reverted this above, so make sure it's set properly again. We also unlocked in that scenario, so reset that too. this._locked = true; prevTime = (backwards) ? dur + 0.0001 : -0.0001; this.render(prevTime, true, false); } this._locked = false; if (this._paused && !prevPaused) { //if the render() triggered callback that paused this timeline, we should abort (very rare, but possible) return; } this._time = recTime; this._totalTime = recTotalTime; this._cycle = recCycle; this._rawPrevTime = recRawPrevTime; } if ((this._time === prevTime || !this._first) && !force && !internalForce && !pauseTween) { if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate. this._callback("onUpdate"); } return; } else if (!this._initted) { this._initted = true; } if (!this._active) if (!this._paused && this._totalTime !== prevTotalTime && time > 0) { this._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example. } if (prevTotalTime === 0) if (this.vars.onStart) if (this._totalTime !== 0 || !this._totalDuration) if (!suppressEvents) { this._callback("onStart"); } curTime = this._time; if (curTime >= prevTime) { tween = this._first; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= this._time && !tween._paused && !tween._gc)) { if (pauseTween === tween) { this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } else { tween = this._last; while (tween) { next = tween._prev; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse. while (pauseTween && pauseTween.endTime() > this._time) { pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force); pauseTween = pauseTween._prev; } pauseTween = null; this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } if (this._onUpdate) if (!suppressEvents) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values. _lazyRender(); } this._callback("onUpdate"); } if (callback) if (!this._locked) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate if (isComplete) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values. _lazyRender(); } if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } } }; p.getActive = function(nested, tweens, timelines) { if (nested == null) { nested = true; } if (tweens == null) { tweens = true; } if (timelines == null) { timelines = false; } var a = [], all = this.getChildren(nested, tweens, timelines), cnt = 0, l = all.length, i, tween; for (i = 0; i < l; i++) { tween = all[i]; if (tween.isActive()) { a[cnt++] = tween; } } return a; }; p.getLabelAfter = function(time) { if (!time) if (time !== 0) { //faster than isNan() time = this._time; } var labels = this.getLabelsArray(), l = labels.length, i; for (i = 0; i < l; i++) { if (labels[i].time > time) { return labels[i].name; } } return null; }; p.getLabelBefore = function(time) { if (time == null) { time = this._time; } var labels = this.getLabelsArray(), i = labels.length; while (--i > -1) { if (labels[i].time < time) { return labels[i].name; } } return null; }; p.getLabelsArray = function() { var a = [], cnt = 0, p; for (p in this._labels) { a[cnt++] = {time:this._labels[p], name:p}; } a.sort(function(a,b) { return a.time - b.time; }); return a; }; p.invalidate = function() { this._locked = false; //unlock and set cycle in case invalidate() is called from inside an onRepeat return TimelineLite.prototype.invalidate.call(this); }; //---- GETTERS / SETTERS ------------------------------------------------------------------------------------------------------- p.progress = function(value, suppressEvents) { return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents); }; p.totalProgress = function(value, suppressEvents) { return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, suppressEvents); }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { TimelineLite.prototype.totalDuration.call(this); //just forces refresh //Instead of Infinity, we use 999999999999 so that we can accommodate reverses. this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat); } return this._totalDuration; } return (this._repeat === -1 || !value) ? this : this.timeScale( this.totalDuration() / value ); }; p.time = function(value, suppressEvents) { if (!arguments.length) { return this._time; } if (this._dirty) { this.totalDuration(); } if (value > this._duration) { value = this._duration; } if (this._yoyo && (this._cycle & 1) !== 0) { value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay)); } else if (this._repeat !== 0) { value += this._cycle * (this._duration + this._repeatDelay); } return this.totalTime(value, suppressEvents); }; p.repeat = function(value) { if (!arguments.length) { return this._repeat; } this._repeat = value; return this._uncache(true); }; p.repeatDelay = function(value) { if (!arguments.length) { return this._repeatDelay; } this._repeatDelay = value; return this._uncache(true); }; p.yoyo = function(value) { if (!arguments.length) { return this._yoyo; } this._yoyo = value; return this; }; p.currentLabel = function(value) { if (!arguments.length) { return this.getLabelBefore(this._time + 0.00000001); } return this.seek(value, true); }; return TimelineMax; }, true); /* * ---------------------------------------------------------------- * BezierPlugin * ---------------------------------------------------------------- */ (function() { var _RAD2DEG = 180 / Math.PI, _r1 = [], _r2 = [], _r3 = [], _corProps = {}, _globals = _gsScope._gsDefine.globals, Segment = function(a, b, c, d) { if (c === d) { //if c and d match, the final autoRotate value could lock at -90 degrees, so differentiate them slightly. c = d - (d - b) / 1000000; } if (a === b) { //if a and b match, the starting autoRotate value could lock at -90 degrees, so differentiate them slightly. b = a + (c - a) / 1000000; } this.a = a; this.b = b; this.c = c; this.d = d; this.da = d - a; this.ca = c - a; this.ba = b - a; }, _correlate = ",x,y,z,left,top,right,bottom,marginTop,marginLeft,marginRight,marginBottom,paddingLeft,paddingTop,paddingRight,paddingBottom,backgroundPosition,backgroundPosition_y,", cubicToQuadratic = function(a, b, c, d) { var q1 = {a:a}, q2 = {}, q3 = {}, q4 = {c:d}, mab = (a + b) / 2, mbc = (b + c) / 2, mcd = (c + d) / 2, mabc = (mab + mbc) / 2, mbcd = (mbc + mcd) / 2, m8 = (mbcd - mabc) / 8; q1.b = mab + (a - mab) / 4; q2.b = mabc + m8; q1.c = q2.a = (q1.b + q2.b) / 2; q2.c = q3.a = (mabc + mbcd) / 2; q3.b = mbcd - m8; q4.b = mcd + (d - mcd) / 4; q3.c = q4.a = (q3.b + q4.b) / 2; return [q1, q2, q3, q4]; }, _calculateControlPoints = function(a, curviness, quad, basic, correlate) { var l = a.length - 1, ii = 0, cp1 = a[0].a, i, p1, p2, p3, seg, m1, m2, mm, cp2, qb, r1, r2, tl; for (i = 0; i < l; i++) { seg = a[ii]; p1 = seg.a; p2 = seg.d; p3 = a[ii+1].d; if (correlate) { r1 = _r1[i]; r2 = _r2[i]; tl = ((r2 + r1) * curviness * 0.25) / (basic ? 0.5 : _r3[i] || 0.5); m1 = p2 - (p2 - p1) * (basic ? curviness * 0.5 : (r1 !== 0 ? tl / r1 : 0)); m2 = p2 + (p3 - p2) * (basic ? curviness * 0.5 : (r2 !== 0 ? tl / r2 : 0)); mm = p2 - (m1 + (((m2 - m1) * ((r1 * 3 / (r1 + r2)) + 0.5) / 4) || 0)); } else { m1 = p2 - (p2 - p1) * curviness * 0.5; m2 = p2 + (p3 - p2) * curviness * 0.5; mm = p2 - (m1 + m2) / 2; } m1 += mm; m2 += mm; seg.c = cp2 = m1; if (i !== 0) { seg.b = cp1; } else { seg.b = cp1 = seg.a + (seg.c - seg.a) * 0.6; //instead of placing b on a exactly, we move it inline with c so that if the user specifies an ease like Back.easeIn or Elastic.easeIn which goes BEYOND the beginning, it will do so smoothly. } seg.da = p2 - p1; seg.ca = cp2 - p1; seg.ba = cp1 - p1; if (quad) { qb = cubicToQuadratic(p1, cp1, cp2, p2); a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]); ii += 4; } else { ii++; } cp1 = m2; } seg = a[ii]; seg.b = cp1; seg.c = cp1 + (seg.d - cp1) * 0.4; //instead of placing c on d exactly, we move it inline with b so that if the user specifies an ease like Back.easeOut or Elastic.easeOut which goes BEYOND the end, it will do so smoothly. seg.da = seg.d - seg.a; seg.ca = seg.c - seg.a; seg.ba = cp1 - seg.a; if (quad) { qb = cubicToQuadratic(seg.a, cp1, seg.c, seg.d); a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]); } }, _parseAnchors = function(values, p, correlate, prepend) { var a = [], l, i, p1, p2, p3, tmp; if (prepend) { values = [prepend].concat(values); i = values.length; while (--i > -1) { if (typeof( (tmp = values[i][p]) ) === "string") if (tmp.charAt(1) === "=") { values[i][p] = prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)); //accommodate relative values. Do it inline instead of breaking it out into a function for speed reasons } } } l = values.length - 2; if (l < 0) { a[0] = new Segment(values[0][p], 0, 0, values[(l < -1) ? 0 : 1][p]); return a; } for (i = 0; i < l; i++) { p1 = values[i][p]; p2 = values[i+1][p]; a[i] = new Segment(p1, 0, 0, p2); if (correlate) { p3 = values[i+2][p]; _r1[i] = (_r1[i] || 0) + (p2 - p1) * (p2 - p1); _r2[i] = (_r2[i] || 0) + (p3 - p2) * (p3 - p2); } } a[i] = new Segment(values[i][p], 0, 0, values[i+1][p]); return a; }, bezierThrough = function(values, curviness, quadratic, basic, correlate, prepend) { var obj = {}, props = [], first = prepend || values[0], i, p, a, j, r, l, seamless, last; correlate = (typeof(correlate) === "string") ? ","+correlate+"," : _correlate; if (curviness == null) { curviness = 1; } for (p in values[0]) { props.push(p); } //check to see if the last and first values are identical (well, within 0.05). If so, make seamless by appending the second element to the very end of the values array and the 2nd-to-last element to the very beginning (we'll remove those segments later) if (values.length > 1) { last = values[values.length - 1]; seamless = true; i = props.length; while (--i > -1) { p = props[i]; if (Math.abs(first[p] - last[p]) > 0.05) { //build in a tolerance of +/-0.05 to accommodate rounding errors. seamless = false; break; } } if (seamless) { values = values.concat(); //duplicate the array to avoid contaminating the original which the user may be reusing for other tweens if (prepend) { values.unshift(prepend); } values.push(values[1]); prepend = values[values.length - 3]; } } _r1.length = _r2.length = _r3.length = 0; i = props.length; while (--i > -1) { p = props[i]; _corProps[p] = (correlate.indexOf(","+p+",") !== -1); obj[p] = _parseAnchors(values, p, _corProps[p], prepend); } i = _r1.length; while (--i > -1) { _r1[i] = Math.sqrt(_r1[i]); _r2[i] = Math.sqrt(_r2[i]); } if (!basic) { i = props.length; while (--i > -1) { if (_corProps[p]) { a = obj[props[i]]; l = a.length - 1; for (j = 0; j < l; j++) { r = (a[j+1].da / _r2[j] + a[j].da / _r1[j]) || 0; _r3[j] = (_r3[j] || 0) + r * r; } } } i = _r3.length; while (--i > -1) { _r3[i] = Math.sqrt(_r3[i]); } } i = props.length; j = quadratic ? 4 : 1; while (--i > -1) { p = props[i]; a = obj[p]; _calculateControlPoints(a, curviness, quadratic, basic, _corProps[p]); //this method requires that _parseAnchors() and _setSegmentRatios() ran first so that _r1, _r2, and _r3 values are populated for all properties if (seamless) { a.splice(0, j); a.splice(a.length - j, j); } } return obj; }, _parseBezierData = function(values, type, prepend) { type = type || "soft"; var obj = {}, inc = (type === "cubic") ? 3 : 2, soft = (type === "soft"), props = [], a, b, c, d, cur, i, j, l, p, cnt, tmp; if (soft && prepend) { values = [prepend].concat(values); } if (values == null || values.length < inc + 1) { throw "invalid Bezier data"; } for (p in values[0]) { props.push(p); } i = props.length; while (--i > -1) { p = props[i]; obj[p] = cur = []; cnt = 0; l = values.length; for (j = 0; j < l; j++) { a = (prepend == null) ? values[j][p] : (typeof( (tmp = values[j][p]) ) === "string" && tmp.charAt(1) === "=") ? prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)) : Number(tmp); if (soft) if (j > 1) if (j < l - 1) { cur[cnt++] = (a + cur[cnt-2]) / 2; } cur[cnt++] = a; } l = cnt - inc + 1; cnt = 0; for (j = 0; j < l; j += inc) { a = cur[j]; b = cur[j+1]; c = cur[j+2]; d = (inc === 2) ? 0 : cur[j+3]; cur[cnt++] = tmp = (inc === 3) ? new Segment(a, b, c, d) : new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c); } cur.length = cnt; } return obj; }, _addCubicLengths = function(a, steps, resolution) { var inc = 1 / resolution, j = a.length, d, d1, s, da, ca, ba, p, i, inv, bez, index; while (--j > -1) { bez = a[j]; s = bez.a; da = bez.d - s; ca = bez.c - s; ba = bez.b - s; d = d1 = 0; for (i = 1; i <= resolution; i++) { p = inc * i; inv = 1 - p; d = d1 - (d1 = (p * p * da + 3 * inv * (p * ca + inv * ba)) * p); index = j * resolution + i - 1; steps[index] = (steps[index] || 0) + d * d; } } }, _parseLengthData = function(obj, resolution) { resolution = resolution >> 0 || 6; var a = [], lengths = [], d = 0, total = 0, threshold = resolution - 1, segments = [], curLS = [], //current length segments array p, i, l, index; for (p in obj) { _addCubicLengths(obj[p], a, resolution); } l = a.length; for (i = 0; i < l; i++) { d += Math.sqrt(a[i]); index = i % resolution; curLS[index] = d; if (index === threshold) { total += d; index = (i / resolution) >> 0; segments[index] = curLS; lengths[index] = total; d = 0; curLS = []; } } return {length:total, lengths:lengths, segments:segments}; }, BezierPlugin = _gsScope._gsDefine.plugin({ propName: "bezier", priority: -1, version: "1.3.7", API: 2, global:true, //gets called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, vars, tween) { this._target = target; if (vars instanceof Array) { vars = {values:vars}; } this._func = {}; this._mod = {}; this._props = []; this._timeRes = (vars.timeResolution == null) ? 6 : parseInt(vars.timeResolution, 10); var values = vars.values || [], first = {}, second = values[0], autoRotate = vars.autoRotate || tween.vars.orientToBezier, p, isFunc, i, j, prepend; this._autoRotate = autoRotate ? (autoRotate instanceof Array) ? autoRotate : [["x","y","rotation",((autoRotate === true) ? 0 : Number(autoRotate) || 0)]] : null; for (p in second) { this._props.push(p); } i = this._props.length; while (--i > -1) { p = this._props[i]; this._overwriteProps.push(p); isFunc = this._func[p] = (typeof(target[p]) === "function"); first[p] = (!isFunc) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ](); if (!prepend) if (first[p] !== values[0][p]) { prepend = first; } } this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate, prepend) : _parseBezierData(values, vars.type, first); this._segCount = this._beziers[p].length; if (this._timeRes) { var ld = _parseLengthData(this._beziers, this._timeRes); this._length = ld.length; this._lengths = ld.lengths; this._segments = ld.segments; this._l1 = this._li = this._s1 = this._si = 0; this._l2 = this._lengths[0]; this._curSeg = this._segments[0]; this._s2 = this._curSeg[0]; this._prec = 1 / this._curSeg.length; } if ((autoRotate = this._autoRotate)) { this._initialRotations = []; if (!(autoRotate[0] instanceof Array)) { this._autoRotate = autoRotate = [autoRotate]; } i = autoRotate.length; while (--i > -1) { for (j = 0; j < 3; j++) { p = autoRotate[i][j]; this._func[p] = (typeof(target[p]) === "function") ? target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ] : false; } p = autoRotate[i][2]; this._initialRotations[i] = (this._func[p] ? this._func[p].call(this._target) : this._target[p]) || 0; this._overwriteProps.push(p); } } this._startRatio = tween.vars.runBackwards ? 1 : 0; //we determine the starting ratio when the tween inits which is always 0 unless the tween has runBackwards:true (indicating it's a from() tween) in which case it's 1. return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var segments = this._segCount, func = this._func, target = this._target, notStart = (v !== this._startRatio), curIndex, inv, i, p, b, t, val, l, lengths, curSeg; if (!this._timeRes) { curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0; t = (v - (curIndex * (1 / segments))) * segments; } else { lengths = this._lengths; curSeg = this._curSeg; v *= this._length; i = this._li; //find the appropriate segment (if the currently cached one isn't correct) if (v > this._l2 && i < segments - 1) { l = segments - 1; while (i < l && (this._l2 = lengths[++i]) <= v) { } this._l1 = lengths[i-1]; this._li = i; this._curSeg = curSeg = this._segments[i]; this._s2 = curSeg[(this._s1 = this._si = 0)]; } else if (v < this._l1 && i > 0) { while (i > 0 && (this._l1 = lengths[--i]) >= v) { } if (i === 0 && v < this._l1) { this._l1 = 0; } else { i++; } this._l2 = lengths[i]; this._li = i; this._curSeg = curSeg = this._segments[i]; this._s1 = curSeg[(this._si = curSeg.length - 1) - 1] || 0; this._s2 = curSeg[this._si]; } curIndex = i; //now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one) v -= this._l1; i = this._si; if (v > this._s2 && i < curSeg.length - 1) { l = curSeg.length - 1; while (i < l && (this._s2 = curSeg[++i]) <= v) { } this._s1 = curSeg[i-1]; this._si = i; } else if (v < this._s1 && i > 0) { while (i > 0 && (this._s1 = curSeg[--i]) >= v) { } if (i === 0 && v < this._s1) { this._s1 = 0; } else { i++; } this._s2 = curSeg[i]; this._si = i; } t = ((i + (v - this._s1) / (this._s2 - this._s1)) * this._prec) || 0; } inv = 1 - t; i = this._props.length; while (--i > -1) { p = this._props[i]; b = this._beziers[p][curIndex]; val = (t * t * b.da + 3 * inv * (t * b.ca + inv * b.ba)) * t + b.a; if (this._mod[p]) { val = this._mod[p](val, target); } if (func[p]) { target[p](val); } else { target[p] = val; } } if (this._autoRotate) { var ar = this._autoRotate, b2, x1, y1, x2, y2, add, conv; i = ar.length; while (--i > -1) { p = ar[i][2]; add = ar[i][3] || 0; conv = (ar[i][4] === true) ? 1 : _RAD2DEG; b = this._beziers[ar[i][0]]; b2 = this._beziers[ar[i][1]]; if (b && b2) { //in case one of the properties got overwritten. b = b[curIndex]; b2 = b2[curIndex]; x1 = b.a + (b.b - b.a) * t; x2 = b.b + (b.c - b.b) * t; x1 += (x2 - x1) * t; x2 += ((b.c + (b.d - b.c) * t) - x2) * t; y1 = b2.a + (b2.b - b2.a) * t; y2 = b2.b + (b2.c - b2.b) * t; y1 += (y2 - y1) * t; y2 += ((b2.c + (b2.d - b2.c) * t) - y2) * t; val = notStart ? Math.atan2(y2 - y1, x2 - x1) * conv + add : this._initialRotations[i]; if (this._mod[p]) { val = this._mod[p](val, target); //for modProps } if (func[p]) { target[p](val); } else { target[p] = val; } } } } } }), p = BezierPlugin.prototype; BezierPlugin.bezierThrough = bezierThrough; BezierPlugin.cubicToQuadratic = cubicToQuadratic; BezierPlugin._autoCSS = true; //indicates that this plugin can be inserted into the "css" object using the autoCSS feature of TweenLite BezierPlugin.quadraticToCubic = function(a, b, c) { return new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c); }; BezierPlugin._cssRegister = function() { var CSSPlugin = _globals.CSSPlugin; if (!CSSPlugin) { return; } var _internals = CSSPlugin._internals, _parseToProxy = _internals._parseToProxy, _setPluginRatio = _internals._setPluginRatio, CSSPropTween = _internals.CSSPropTween; _internals._registerComplexSpecialProp("bezier", {parser:function(t, e, prop, cssp, pt, plugin) { if (e instanceof Array) { e = {values:e}; } plugin = new BezierPlugin(); var values = e.values, l = values.length - 1, pluginValues = [], v = {}, i, p, data; if (l < 0) { return pt; } for (i = 0; i <= l; i++) { data = _parseToProxy(t, values[i], cssp, pt, plugin, (l !== i)); pluginValues[i] = data.end; } for (p in e) { v[p] = e[p]; //duplicate the vars object because we need to alter some things which would cause problems if the user plans to reuse the same vars object for another tween. } v.values = pluginValues; pt = new CSSPropTween(t, "bezier", 0, 0, data.pt, 2); pt.data = data; pt.plugin = plugin; pt.setRatio = _setPluginRatio; if (v.autoRotate === 0) { v.autoRotate = true; } if (v.autoRotate && !(v.autoRotate instanceof Array)) { i = (v.autoRotate === true) ? 0 : Number(v.autoRotate); v.autoRotate = (data.end.left != null) ? [["left","top","rotation",i,false]] : (data.end.x != null) ? [["x","y","rotation",i,false]] : false; } if (v.autoRotate) { if (!cssp._transform) { cssp._enableTransforms(false); } data.autoRotate = cssp._target._gsTransform; data.proxy.rotation = data.autoRotate.rotation || 0; cssp._overwriteProps.push("rotation"); } plugin._onInitTween(data.proxy, v, cssp._tween); return pt; }}); }; p._mod = function(lookup) { var op = this._overwriteProps, i = op.length, val; while (--i > -1) { val = lookup[op[i]]; if (val && typeof(val) === "function") { this._mod[op[i]] = val; } } }; p._kill = function(lookup) { var a = this._props, p, i; for (p in this._beziers) { if (p in lookup) { delete this._beziers[p]; delete this._func[p]; i = a.length; while (--i > -1) { if (a[i] === p) { a.splice(i, 1); } } } } a = this._autoRotate; if (a) { i = a.length; while (--i > -1) { if (lookup[a[i][2]]) { a.splice(i, 1); } } } return this._super._kill.call(this, lookup); }; }()); /* * ---------------------------------------------------------------- * CSSPlugin * ---------------------------------------------------------------- */ _gsScope._gsDefine("plugins.CSSPlugin", ["plugins.TweenPlugin","TweenLite"], function(TweenPlugin, TweenLite) { /** @constructor **/ var CSSPlugin = function() { TweenPlugin.call(this, "css"); this._overwriteProps.length = 0; this.setRatio = CSSPlugin.prototype.setRatio; //speed optimization (avoid prototype lookup on this "hot" method) }, _globals = _gsScope._gsDefine.globals, _hasPriority, //turns true whenever a CSSPropTween instance is created that has a priority other than 0. This helps us discern whether or not we should spend the time organizing the linked list or not after a CSSPlugin's _onInitTween() method is called. _suffixMap, //we set this in _onInitTween() each time as a way to have a persistent variable we can use in other methods like _parse() without having to pass it around as a parameter and we keep _parse() decoupled from a particular CSSPlugin instance _cs, //computed style (we store this in a shared variable to conserve memory and make minification tighter _overwriteProps, //alias to the currently instantiating CSSPlugin's _overwriteProps array. We use this closure in order to avoid having to pass a reference around from method to method and aid in minification. _specialProps = {}, p = CSSPlugin.prototype = new TweenPlugin("css"); p.constructor = CSSPlugin; CSSPlugin.version = "1.19.1"; CSSPlugin.API = 2; CSSPlugin.defaultTransformPerspective = 0; CSSPlugin.defaultSkewType = "compensated"; CSSPlugin.defaultSmoothOrigin = true; p = "px"; //we'll reuse the "p" variable to keep file size down CSSPlugin.suffixMap = {top:p, right:p, bottom:p, left:p, width:p, height:p, fontSize:p, padding:p, margin:p, perspective:p, lineHeight:""}; var _numExp = /(?:\-|\.|\b)(\d|\.|e\-)+/g, _relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g, _valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)" _NaNExp = /(?![+-]?\d*\.?\d+|[+-]|e[+-]\d+)[^0-9]/g, //also allows scientific notation and doesn't kill the leading -/+ in -= and += _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g, _opacityExp = /opacity *= *([^)]*)/i, _opacityValExp = /opacity:([^;]*)/i, _alphaFilterExp = /alpha\(opacity *=.+?\)/i, _rgbhslExp = /^(rgb|hsl)/, _capsExp = /([A-Z])/g, _camelExp = /-([a-z])/gi, _urlExp = /(^(?:url\(\"|url\())|(?:(\"\))$|\)$)/gi, //for pulling out urls from url(...) or url("...") strings (some browsers wrap urls in quotes, some don't when reporting things like backgroundImage) _camelFunc = function(s, g) { return g.toUpperCase(); }, _horizExp = /(?:Left|Right|Width)/i, _ieGetMatrixExp = /(M11|M12|M21|M22)=[\d\-\.e]+/gi, _ieSetMatrixExp = /progid\:DXImageTransform\.Microsoft\.Matrix\(.+?\)/i, _commasOutsideParenExp = /,(?=[^\)]*(?:\(|$))/gi, //finds any commas that are not within parenthesis _complexExp = /[\s,\(]/i, //for testing a string to find if it has a space, comma, or open parenthesis (clues that it's a complex value) _DEG2RAD = Math.PI / 180, _RAD2DEG = 180 / Math.PI, _forcePT = {}, _dummyElement = {style:{}}, _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, _createElement = function(type, ns) { return _doc.createElementNS ? _doc.createElementNS(ns || "http://www.w3.org/1999/xhtml", type) : _doc.createElement(type); }, _tempDiv = _createElement("div"), _tempImg = _createElement("img"), _internals = CSSPlugin._internals = {_specialProps:_specialProps}, //provides a hook to a few internal methods that we need to access from inside other plugins _agent = (_gsScope.navigator || {}).userAgent || "", _autoRound, _reqSafariFix, //we won't apply the Safari transform fix until we actually come across a tween that affects a transform property (to maintain best performance). _isSafari, _isFirefox, //Firefox has a bug that causes 3D transformed elements to randomly disappear unless a repaint is forced after each update on each element. _isSafariLT6, //Safari (and Android 4 which uses a flavor of Safari) has a bug that prevents changes to "top" and "left" properties from rendering properly if changed on the same frame as a transform UNLESS we set the element's WebkitBackfaceVisibility to hidden (weird, I know). Doing this for Android 3 and earlier seems to actually cause other problems, though (fun!) _ieVers, _supportsOpacity = (function() { //we set _isSafari, _ieVers, _isFirefox, and _supportsOpacity all in one function here to reduce file size slightly, especially in the minified version. var i = _agent.indexOf("Android"), a = _createElement("a"); _isSafari = (_agent.indexOf("Safari") !== -1 && _agent.indexOf("Chrome") === -1 && (i === -1 || parseFloat(_agent.substr(i+8, 2)) > 3)); _isSafariLT6 = (_isSafari && (parseFloat(_agent.substr(_agent.indexOf("Version/")+8, 2)) < 6)); _isFirefox = (_agent.indexOf("Firefox") !== -1); Iif ((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(_agent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(_agent)) { _ieVers = parseFloat( RegExp.$1 ); } Iif (!a) { return false; } a.style.cssText = "top:1px;opacity:.55;"; return /^0.55/.test(a.style.opacity); }()), _getIEOpacity = function(v) { return (_opacityExp.test( ((typeof(v) === "string") ? v : (v.currentStyle ? v.currentStyle.filter : v.style.filter) || "") ) ? ( parseFloat( RegExp.$1 ) / 100 ) : 1); }, _log = function(s) {//for logging messages, but in a way that won't throw errors in old versions of IE. if (_gsScope.console) { console.log(s); } }, _target, //when initting a CSSPlugin, we set this variable so that we can access it from within many other functions without having to pass it around as params _index, //when initting a CSSPlugin, we set this variable so that we can access it from within many other functions without having to pass it around as params _prefixCSS = "", //the non-camelCase vendor prefix like "-o-", "-moz-", "-ms-", or "-webkit-" _prefix = "", //camelCase vendor prefix like "O", "ms", "Webkit", or "Moz". // @private feed in a camelCase property name like "transform" and it will check to see if it is valid as-is or if it needs a vendor prefix. It returns the corrected camelCase property name (i.e. "WebkitTransform" or "MozTransform" or "transform" or null if no such property is found, like if the browser is IE8 or before, "transform" won't be found at all) _checkPropPrefix = function(p, e) { e = e || _tempDiv; var s = e.style, a, i; Iif (s[p] !== undefined) { return p; } p = p.charAt(0).toUpperCase() + p.substr(1); a = ["O","Moz","ms","Ms","Webkit"]; i = 5; while (--i > -1 && s[a[i]+p] === undefined) { } Iif (i >= 0) { _prefix = (i === 3) ? "ms" : a[i]; _prefixCSS = "-" + _prefix.toLowerCase() + "-"; return _prefix + p; } return null; }, _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : function() {}, /** * @private Returns the css style for a particular property of an element. For example, to get whatever the current "left" css value for an element with an ID of "myElement", you could do: * var currentLeft = CSSPlugin.getStyle( document.getElementById("myElement"), "left"); * * @param {!Object} t Target element whose style property you want to query * @param {!string} p Property name (like "left" or "top" or "marginTop", etc.) * @param {Object=} cs Computed style object. This just provides a way to speed processing if you're going to get several properties on the same element in quick succession - you can reuse the result of the getComputedStyle() call. * @param {boolean=} calc If true, the value will not be read directly from the element's "style" property (if it exists there), but instead the getComputedStyle() result will be used. This can be useful when you want to ensure that the browser itself is interpreting the value. * @param {string=} dflt Default value that should be returned in the place of null, "none", "auto" or "auto auto". * @return {?string} The current property value */ _getStyle = CSSPlugin.getStyle = function(t, p, cs, calc, dflt) { var rv; if (!_supportsOpacity) if (p === "opacity") { //several versions of IE don't use the standard "opacity" property - they use things like filter:alpha(opacity=50), so we parse that here. return _getIEOpacity(t); } if (!calc && t.style[p]) { rv = t.style[p]; } else if ((cs = cs || _getComputedStyle(t))) { rv = cs[p] || cs.getPropertyValue(p) || cs.getPropertyValue(p.replace(_capsExp, "-$1").toLowerCase()); } else if (t.currentStyle) { rv = t.currentStyle[p]; } return (dflt != null && (!rv || rv === "none" || rv === "auto" || rv === "auto auto")) ? dflt : rv; }, /** * @private Pass the target element, the property name, the numeric value, and the suffix (like "%", "em", "px", etc.) and it will spit back the equivalent pixel number. * @param {!Object} t Target element * @param {!string} p Property name (like "left", "top", "marginLeft", etc.) * @param {!number} v Value * @param {string=} sfx Suffix (like "px" or "%" or "em") * @param {boolean=} recurse If true, the call is a recursive one. In some browsers (like IE7/8), occasionally the value isn't accurately reported initially, but if we run the function again it will take effect. * @return {number} value in pixels */ _convertToPixels = _internals.convertToPixels = function(t, p, v, sfx, recurse) { if (sfx === "px" || !sfx) { return v; } if (sfx === "auto" || !v) { return 0; } var horiz = _horizExp.test(p), node = t, style = _tempDiv.style, neg = (v < 0), precise = (v === 1), pix, cache, time; if (neg) { v = -v; } if (precise) { v *= 100; } if (sfx === "%" && p.indexOf("border") !== -1) { pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight); } else { style.cssText = "border:0 solid red;position:" + _getStyle(t, "position") + ";line-height:0;"; if (sfx === "%" || !node.appendChild || sfx.charAt(0) === "v" || sfx === "rem") { node = t.parentNode || _doc.body; cache = node._gsCache; time = TweenLite.ticker.frame; if (cache && horiz && cache.time === time) { //performance optimization: we record the width of elements along with the ticker frame so that we can quickly get it again on the same tick (seems relatively safe to assume it wouldn't change on the same tick) return cache.width * v / 100; } style[(horiz ? "width" : "height")] = v + sfx; } else { style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx; } node.appendChild(_tempDiv); pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]); node.removeChild(_tempDiv); if (horiz && sfx === "%" && CSSPlugin.cacheWidths !== false) { cache = node._gsCache = node._gsCache || {}; cache.time = time; cache.width = pix / v * 100; } if (pix === 0 && !recurse) { pix = _convertToPixels(t, p, v, sfx, true); } } if (precise) { pix /= 100; } return neg ? -pix : pix; }, _calculateOffset = _internals.calculateOffset = function(t, p, cs) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop if (_getStyle(t, "position", cs) !== "absolute") { return 0; } var dim = ((p === "left") ? "Left" : "Top"), v = _getStyle(t, "margin" + dim, cs); return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), v.replace(_suffixExp, "")) || 0); }, // @private returns at object containing ALL of the style properties in camelCase and their associated values. _getAllStyles = function(t, cs) { var s = {}, i, tr, p; if ((cs = cs || _getComputedStyle(t, null))) { if ((i = cs.length)) { while (--i > -1) { p = cs[i]; if (p.indexOf("-transform") === -1 || _transformPropCSS === p) { //Some webkit browsers duplicate transform values, one non-prefixed and one prefixed ("transform" and "WebkitTransform"), so we must weed out the extra one here. s[p.replace(_camelExp, _camelFunc)] = cs.getPropertyValue(p); } } } else { //some browsers behave differently - cs.length is always 0, so we must do a for...in loop. for (i in cs) { if (i.indexOf("Transform") === -1 || _transformProp === i) { //Some webkit browsers duplicate transform values, one non-prefixed and one prefixed ("transform" and "WebkitTransform"), so we must weed out the extra one here. s[i] = cs[i]; } } } } else if ((cs = t.currentStyle || t.style)) { for (i in cs) { if (typeof(i) === "string" && s[i] === undefined) { s[i.replace(_camelExp, _camelFunc)] = cs[i]; } } } if (!_supportsOpacity) { s.opacity = _getIEOpacity(t); } tr = _getTransform(t, cs, false); s.rotation = tr.rotation; s.skewX = tr.skewX; s.scaleX = tr.scaleX; s.scaleY = tr.scaleY; s.x = tr.x; s.y = tr.y; if (_supports3D) { s.z = tr.z; s.rotationX = tr.rotationX; s.rotationY = tr.rotationY; s.scaleZ = tr.scaleZ; } if (s.filters) { delete s.filters; } return s; }, // @private analyzes two style objects (as returned by _getAllStyles()) and only looks for differences between them that contain tweenable values (like a number or color). It returns an object with a "difs" property which refers to an object containing only those isolated properties and values for tweening, and a "firstMPT" property which refers to the first MiniPropTween instance in a linked list that recorded all the starting values of the different properties so that we can revert to them at the end or beginning of the tween - we don't want the cascading to get messed up. The forceLookup parameter is an optional generic object with properties that should be forced into the results - this is necessary for className tweens that are overwriting others because imagine a scenario where a rollover/rollout adds/removes a class and the user swipes the mouse over the target SUPER fast, thus nothing actually changed yet and the subsequent comparison of the properties would indicate they match (especially when px rounding is taken into consideration), thus no tweening is necessary even though it SHOULD tween and remove those properties after the tween (otherwise the inline styles will contaminate things). See the className SpecialProp code for details. _cssDif = function(t, s1, s2, vars, forceLookup) { var difs = {}, style = t.style, val, p, mpt; for (p in s2) { if (p !== "cssText") if (p !== "length") if (isNaN(p)) if (s1[p] !== (val = s2[p]) || (forceLookup && forceLookup[p])) if (p.indexOf("Origin") === -1) if (typeof(val) === "number" || typeof(val) === "string") { difs[p] = (val === "auto" && (p === "left" || p === "top")) ? _calculateOffset(t, p) : ((val === "" || val === "auto" || val === "none") && typeof(s1[p]) === "string" && s1[p].replace(_NaNExp, "") !== "") ? 0 : val; //if the ending value is defaulting ("" or "auto"), we check the starting value and if it can be parsed into a number (a string which could have a suffix too, like 700px), then we swap in 0 for "" or "auto" so that things actually tween. if (style[p] !== undefined) { //for className tweens, we must remember which properties already existed inline - the ones that didn't should be removed when the tween isn't in progress because they were only introduced to facilitate the transition between classes. mpt = new MiniPropTween(style, p, style[p], mpt); } } } if (vars) { for (p in vars) { //copy properties (except className) if (p !== "className") { difs[p] = vars[p]; } } } return {difs:difs, firstMPT:mpt}; }, _dimensions = {width:["Left","Right"], height:["Top","Bottom"]}, _margins = ["marginLeft","marginRight","marginTop","marginBottom"], /** * @private Gets the width or height of an element * @param {!Object} t Target element * @param {!string} p Property name ("width" or "height") * @param {Object=} cs Computed style object (if one exists). Just a speed optimization. * @return {number} Dimension (in pixels) */ _getDimension = function(t, p, cs) { if ((t.nodeName + "").toLowerCase() === "svg") { //Chrome no longer supports offsetWidth/offsetHeight on SVG elements. return (cs || _getComputedStyle(t))[p] || 0; } else if (t.getCTM && _isSVG(t)) { return t.getBBox()[p] || 0; } var v = parseFloat((p === "width") ? t.offsetWidth : t.offsetHeight), a = _dimensions[p], i = a.length; cs = cs || _getComputedStyle(t, null); while (--i > -1) { v -= parseFloat( _getStyle(t, "padding" + a[i], cs, true) ) || 0; v -= parseFloat( _getStyle(t, "border" + a[i] + "Width", cs, true) ) || 0; } return v; }, // @private Parses position-related complex strings like "top left" or "50px 10px" or "70% 20%", etc. which are used for things like transformOrigin or backgroundPosition. Optionally decorates a supplied object (recObj) with the following properties: "ox" (offsetX), "oy" (offsetY), "oxp" (if true, "ox" is a percentage not a pixel value), and "oxy" (if true, "oy" is a percentage not a pixel value) _parsePosition = function(v, recObj) { if (v === "contain" || v === "auto" || v === "auto auto") { //note: Firefox uses "auto auto" as default whereas Chrome uses "auto". return v + " "; } if (v == null || v === "") { v = "0 0"; } var a = v.split(" "), x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0], y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1], i; if (a.length > 3 && !recObj) { //multiple positions a = v.split(", ").join(",").split(","); v = []; for (i = 0; i < a.length; i++) { v.push(_parsePosition(a[i])); } return v.join(","); } if (y == null) { y = (x === "center") ? "50%" : "0"; } else if (y === "center") { y = "50%"; } if (x === "center" || (isNaN(parseFloat(x)) && (x + "").indexOf("=") === -1)) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative. x = "50%"; } v = x + " " + y + ((a.length > 2) ? " " + a[2] : ""); if (recObj) { recObj.oxp = (x.indexOf("%") !== -1); recObj.oyp = (y.indexOf("%") !== -1); recObj.oxr = (x.charAt(1) === "="); recObj.oyr = (y.charAt(1) === "="); recObj.ox = parseFloat(x.replace(_NaNExp, "")); recObj.oy = parseFloat(y.replace(_NaNExp, "")); recObj.v = v; } return recObj || v; }, /** * @private Takes an ending value (typically a string, but can be a number) and a starting value and returns the change between the two, looking for relative value indicators like += and -= and it also ignores suffixes (but make sure the ending value starts with a number or +=/-= and that the starting value is a NUMBER!) * @param {(number|string)} e End value which is typically a string, but could be a number * @param {(number|string)} b Beginning value which is typically a string but could be a number * @return {number} Amount of change between the beginning and ending values (relative values that have a "+=" or "-=" are recognized) */ _parseChange = function(e, b) { if (typeof(e) === "function") { e = e(_index, _target); } return (typeof(e) === "string" && e.charAt(1) === "=") ? parseInt(e.charAt(0) + "1", 10) * parseFloat(e.substr(2)) : (parseFloat(e) - parseFloat(b)) || 0; }, /** * @private Takes a value and a default number, checks if the value is relative, null, or numeric and spits back a normalized number accordingly. Primarily used in the _parseTransform() function. * @param {Object} v Value to be parsed * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter) * @return {number} Parsed value */ _parseVal = function(v, d) { if (typeof(v) === "function") { v = v(_index, _target); } return (v == null) ? d : (typeof(v) === "string" && v.charAt(1) === "=") ? parseInt(v.charAt(0) + "1", 10) * parseFloat(v.substr(2)) + d : parseFloat(v) || 0; }, /** * @private Translates strings like "40deg" or "40" or 40rad" or "+=40deg" or "270_short" or "-90_cw" or "+=45_ccw" to a numeric radian angle. Of course a starting/default value must be fed in too so that relative values can be calculated properly. * @param {Object} v Value to be parsed * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter) * @param {string=} p property name for directionalEnd (optional - only used when the parsed value is directional ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation). Property name would be "rotation", "rotationX", or "rotationY" * @param {Object=} directionalEnd An object that will store the raw end values for directional angles ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation. * @return {number} parsed angle in radians */ _parseAngle = function(v, d, p, directionalEnd) { var min = 0.000001, cap, split, dif, result, isRelative; if (typeof(v) === "function") { v = v(_index, _target); } if (v == null) { result = d; } else if (typeof(v) === "number") { result = v; } else { cap = 360; split = v.split("_"); isRelative = (v.charAt(1) === "="); dif = (isRelative ? parseInt(v.charAt(0) + "1", 10) * parseFloat(split[0].substr(2)) : parseFloat(split[0])) * ((v.indexOf("rad") === -1) ? 1 : _RAD2DEG) - (isRelative ? 0 : d); if (split.length) { if (directionalEnd) { directionalEnd[p] = d + dif; } if (v.indexOf("short") !== -1) { dif = dif % cap; if (dif !== dif % (cap / 2)) { dif = (dif < 0) ? dif + cap : dif - cap; } } if (v.indexOf("_cw") !== -1 && dif < 0) { dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } else if (v.indexOf("ccw") !== -1 && dif > 0) { dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } } result = d + dif; } if (result < min && result > -min) { result = 0; } return result; }, _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, _hue = function(h, m1, m2) { h = (h < 0) ? h + 1 : (h > 1) ? h - 1 : h; return ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : (h < 0.5) ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * 255) + 0.5) | 0; }, /** * @private Parses a color (like #9F0, #FF9900, rgb(255,51,153) or hsl(108, 50%, 10%)) into an array with 3 elements for red, green, and blue or if toHSL parameter is true, it will populate the array with hue, saturation, and lightness values. If a relative value is found in an hsl() or hsla() string, it will preserve those relative prefixes and all the values in the array will be strings instead of numbers (in all other cases it will be populated with numbers). * @param {(string|number)} v The value the should be parsed which could be a string like #9F0 or rgb(255,102,51) or rgba(255,0,0,0.5) or it could be a number like 0xFF00CC or even a named color like red, blue, purple, etc. * @param {(boolean)} toHSL If true, an hsl() or hsla() value will be returned instead of rgb() or rgba() * @return {Array.<number>} An array containing red, green, and blue (and optionally alpha) in that order, or if the toHSL parameter was true, the array will contain hue, saturation and lightness (and optionally alpha) in that order. Always numbers unless there's a relative prefix found in an hsl() or hsla() string and toHSL is true. */ _parseColor = CSSPlugin.parseColor = function(v, toHSL) { var a, r, g, b, h, s, l, max, min, d, wasHSL; if (!v) { a = _colorLookup.black; } else if (typeof(v) === "number") { a = [v >> 16, (v >> 8) & 255, v & 255]; } else { if (v.charAt(v.length - 1) === ",") { //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value. v = v.substr(0, v.length - 1); } if (_colorLookup[v]) { a = _colorLookup[v]; } else if (v.charAt(0) === "#") { if (v.length === 4) { //for shorthand like #9F0 r = v.charAt(1); g = v.charAt(2); b = v.charAt(3); v = "#" + r + r + g + g + b + b; } v = parseInt(v.substr(1), 16); a = [v >> 16, (v >> 8) & 255, v & 255]; } else if (v.substr(0, 3) === "hsl") { a = wasHSL = v.match(_numExp); if (!toHSL) { h = (Number(a[0]) % 360) / 360; s = Number(a[1]) / 100; l = Number(a[2]) / 100; g = (l <= 0.5) ? l * (s + 1) : l + s - l * s; r = l * 2 - g; if (a.length > 3) { a[3] = Number(v[3]); } a[0] = _hue(h + 1 / 3, r, g); a[1] = _hue(h, r, g); a[2] = _hue(h - 1 / 3, r, g); } else if (v.indexOf("=") !== -1) { //if relative values are found, just return the raw strings with the relative prefixes in place. return v.match(_relNumExp); } } else { a = v.match(_numExp) || _colorLookup.transparent; } a[0] = Number(a[0]); a[1] = Number(a[1]); a[2] = Number(a[2]); if (a.length > 3) { a[3] = Number(a[3]); } } if (toHSL && !wasHSL) { r = a[0] / 255; g = a[1] / 255; b = a[2] / 255; max = Math.max(r, g, b); min = Math.min(r, g, b); l = (max + min) / 2; if (max === min) { h = s = 0; } else { d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); h = (max === r) ? (g - b) / d + (g < b ? 6 : 0) : (max === g) ? (b - r) / d + 2 : (r - g) / d + 4; h *= 60; } a[0] = (h + 0.5) | 0; a[1] = (s * 100 + 0.5) | 0; a[2] = (l * 100 + 0.5) | 0; } return a; }, _formatColors = function(s, toHSL) { var colors = s.match(_colorExp) || [], charIndex = 0, parsed = colors.length ? "" : s, i, color, temp; for (i = 0; i < colors.length; i++) { color = colors[i]; temp = s.substr(charIndex, s.indexOf(color, charIndex)-charIndex); charIndex += temp.length + color.length; color = _parseColor(color, toHSL); if (color.length === 3) { color.push(1); } parsed += temp + (toHSL ? "hsla(" + color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : "rgba(" + color.join(",")) + ")"; } return parsed + s.substr(charIndex); }, _colorExp = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b"; //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc. for (p in _colorLookup) { _colorExp += "|" + p + "\\b"; } _colorExp = new RegExp(_colorExp+")", "gi"); CSSPlugin.colorStringFilter = function(a) { var combined = a[0] + a[1], toHSL; if (_colorExp.test(combined)) { toHSL = (combined.indexOf("hsl(") !== -1 || combined.indexOf("hsla(") !== -1); a[0] = _formatColors(a[0], toHSL); a[1] = _formatColors(a[1], toHSL); } _colorExp.lastIndex = 0; }; Eif (!TweenLite.defaultStringFilter) { TweenLite.defaultStringFilter = CSSPlugin.colorStringFilter; } /** * @private Returns a formatter function that handles taking a string (or number in some cases) and returning a consistently formatted one in terms of delimiters, quantity of values, etc. For example, we may get boxShadow values defined as "0px red" or "0px 0px 10px rgb(255,0,0)" or "0px 0px 20px 20px #F00" and we need to ensure that what we get back is described with 4 numbers and a color. This allows us to feed it into the _parseComplex() method and split the values up appropriately. The neat thing about this _getFormatter() function is that the dflt defines a pattern as well as a default, so for example, _getFormatter("0px 0px 0px 0px #777", true) not only sets the default as 0px for all distances and #777 for the color, but also sets the pattern such that 4 numbers and a color will always get returned. * @param {!string} dflt The default value and pattern to follow. So "0px 0px 0px 0px #777" will ensure that 4 numbers and a color will always get returned. * @param {boolean=} clr If true, the values should be searched for color-related data. For example, boxShadow values typically contain a color whereas borderRadius don't. * @param {boolean=} collapsible If true, the value is a top/left/right/bottom style one that acts like margin or padding, where if only one value is received, it's used for all 4; if 2 are received, the first is duplicated for 3rd (bottom) and the 2nd is duplicated for the 4th spot (left), etc. * @return {Function} formatter function */ var _getFormatter = function(dflt, clr, collapsible, multi) { if (dflt == null) { return function(v) {return v;}; } var dColor = clr ? (dflt.match(_colorExp) || [""])[0] : "", dVals = dflt.split(dColor).join("").match(_valuesExp) || [], pfx = dflt.substr(0, dflt.indexOf(dVals[0])), sfx = (dflt.charAt(dflt.length - 1) === ")") ? ")" : "", delim = (dflt.indexOf(" ") !== -1) ? " " : ",", numVals = dVals.length, dSfx = (numVals > 0) ? dVals[0].replace(_numExp, "") : "", formatter; Iif (!numVals) { return function(v) {return v;}; } if (clr) { formatter = function(v) { var color, vals, i, a; if (typeof(v) === "number") { v += dSfx; } else if (multi && _commasOutsideParenExp.test(v)) { a = v.replace(_commasOutsideParenExp, "|").split("|"); for (i = 0; i < a.length; i++) { a[i] = formatter(a[i]); } return a.join(","); } color = (v.match(_colorExp) || [dColor])[0]; vals = v.split(color).join("").match(_valuesExp) || []; i = vals.length; if (numVals > i--) { while (++i < numVals) { vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i]; } } return pfx + vals.join(delim) + delim + color + sfx + (v.indexOf("inset") !== -1 ? " inset" : ""); }; return formatter; } formatter = function(v) { var vals, a, i; if (typeof(v) === "number") { v += dSfx; } else if (multi && _commasOutsideParenExp.test(v)) { a = v.replace(_commasOutsideParenExp, "|").split("|"); for (i = 0; i < a.length; i++) { a[i] = formatter(a[i]); } return a.join(","); } vals = v.match(_valuesExp) || []; i = vals.length; if (numVals > i--) { while (++i < numVals) { vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i]; } } return pfx + vals.join(delim) + sfx; }; return formatter; }, /** * @private returns a formatter function that's used for edge-related values like marginTop, marginLeft, paddingBottom, paddingRight, etc. Just pass a comma-delimited list of property names related to the edges. * @param {!string} props a comma-delimited list of property names in order from top to left, like "marginTop,marginRight,marginBottom,marginLeft" * @return {Function} a formatter function */ _getEdgeParser = function(props) { props = props.split(","); return function(t, e, p, cssp, pt, plugin, vars) { var a = (e + "").split(" "), i; vars = {}; for (i = 0; i < 4; i++) { vars[props[i]] = a[i] = a[i] || a[(((i - 1) / 2) >> 0)]; } return cssp.parse(t, vars, pt, plugin); }; }, // @private used when other plugins must tween values first, like BezierPlugin or ThrowPropsPlugin, etc. That plugin's setRatio() gets called first so that the values are updated, and then we loop through the MiniPropTweens which handle copying the values into their appropriate slots so that they can then be applied correctly in the main CSSPlugin setRatio() method. Remember, we typically create a proxy object that has a bunch of uniquely-named properties that we feed to the sub-plugin and it does its magic normally, and then we must interpret those values and apply them to the css because often numbers must get combined/concatenated, suffixes added, etc. to work with css, like boxShadow could have 4 values plus a color. _setPluginRatio = _internals._setPluginRatio = function(v) { this.plugin.setRatio(v); var d = this.data, proxy = d.proxy, mpt = d.firstMPT, min = 0.000001, val, pt, i, str, p; while (mpt) { val = proxy[mpt.v]; if (mpt.r) { val = Math.round(val); } else if (val < min && val > -min) { val = 0; } mpt.t[mpt.p] = val; mpt = mpt._next; } if (d.autoRotate) { d.autoRotate.rotation = d.mod ? d.mod(proxy.rotation, this.t) : proxy.rotation; //special case for ModifyPlugin to hook into an auto-rotating bezier } //at the end, we must set the CSSPropTween's "e" (end) value dynamically here because that's what is used in the final setRatio() method. Same for "b" at the beginning. if (v === 1 || v === 0) { mpt = d.firstMPT; p = (v === 1) ? "e" : "b"; while (mpt) { pt = mpt.t; if (!pt.type) { pt[p] = pt.s + pt.xs0; } else if (pt.type === 1) { str = pt.xs0 + pt.s + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt[p] = str; } mpt = mpt._next; } } }, /** * @private @constructor Used by a few SpecialProps to hold important values for proxies. For example, _parseToProxy() creates a MiniPropTween instance for each property that must get tweened on the proxy, and we record the original property name as well as the unique one we create for the proxy, plus whether or not the value needs to be rounded plus the original value. * @param {!Object} t target object whose property we're tweening (often a CSSPropTween) * @param {!string} p property name * @param {(number|string|object)} v value * @param {MiniPropTween=} next next MiniPropTween in the linked list * @param {boolean=} r if true, the tweened value should be rounded to the nearest integer */ MiniPropTween = function(t, p, v, next, r) { this.t = t; this.p = p; this.v = v; this.r = r; if (next) { next._prev = this; this._next = next; } }, /** * @private Most other plugins (like BezierPlugin and ThrowPropsPlugin and others) can only tween numeric values, but CSSPlugin must accommodate special values that have a bunch of extra data (like a suffix or strings between numeric values, etc.). For example, boxShadow has values like "10px 10px 20px 30px rgb(255,0,0)" which would utterly confuse other plugins. This method allows us to split that data apart and grab only the numeric data and attach it to uniquely-named properties of a generic proxy object ({}) so that we can feed that to virtually any plugin to have the numbers tweened. However, we must also keep track of which properties from the proxy go with which CSSPropTween values and instances. So we create a linked list of MiniPropTweens. Each one records a target (the original CSSPropTween), property (like "s" or "xn1" or "xn2") that we're tweening and the unique property name that was used for the proxy (like "boxShadow_xn1" and "boxShadow_xn2") and whether or not they need to be rounded. That way, in the _setPluginRatio() method we can simply copy the values over from the proxy to the CSSPropTween instance(s). Then, when the main CSSPlugin setRatio() method runs and applies the CSSPropTween values accordingly, they're updated nicely. So the external plugin tweens the numbers, _setPluginRatio() copies them over, and setRatio() acts normally, applying css-specific values to the element. * This method returns an object that has the following properties: * - proxy: a generic object containing the starting values for all the properties that will be tweened by the external plugin. This is what we feed to the external _onInitTween() as the target * - end: a generic object containing the ending values for all the properties that will be tweened by the external plugin. This is what we feed to the external plugin's _onInitTween() as the destination values * - firstMPT: the first MiniPropTween in the linked list * - pt: the first CSSPropTween in the linked list that was created when parsing. If shallow is true, this linked list will NOT attach to the one passed into the _parseToProxy() as the "pt" (4th) parameter. * @param {!Object} t target object to be tweened * @param {!(Object|string)} vars the object containing the information about the tweening values (typically the end/destination values) that should be parsed * @param {!CSSPlugin} cssp The CSSPlugin instance * @param {CSSPropTween=} pt the next CSSPropTween in the linked list * @param {TweenPlugin=} plugin the external TweenPlugin instance that will be handling tweening the numeric values * @param {boolean=} shallow if true, the resulting linked list from the parse will NOT be attached to the CSSPropTween that was passed in as the "pt" (4th) parameter. * @return An object containing the following properties: proxy, end, firstMPT, and pt (see above for descriptions) */ _parseToProxy = _internals._parseToProxy = function(t, vars, cssp, pt, plugin, shallow) { var bpt = pt, start = {}, end = {}, transform = cssp._transform, oldForce = _forcePT, i, p, xp, mpt, firstPT; cssp._transform = null; _forcePT = vars; pt = firstPT = cssp.parse(t, vars, pt, plugin); _forcePT = oldForce; //break off from the linked list so the new ones are isolated. if (shallow) { cssp._transform = transform; if (bpt) { bpt._prev = null; if (bpt._prev) { bpt._prev._next = null; } } } while (pt && pt !== bpt) { if (pt.type <= 1) { p = pt.p; end[p] = pt.s + pt.c; start[p] = pt.s; if (!shallow) { mpt = new MiniPropTween(pt, "s", p, mpt, pt.r); pt.c = 0; } if (pt.type === 1) { i = pt.l; while (--i > 0) { xp = "xn" + i; p = pt.p + "_" + xp; end[p] = pt.data[xp]; start[p] = pt[xp]; if (!shallow) { mpt = new MiniPropTween(pt, xp, p, mpt, pt.rxp[xp]); } } } } pt = pt._next; } return {proxy:start, end:end, firstMPT:mpt, pt:firstPT}; }, /** * @constructor Each property that is tweened has at least one CSSPropTween associated with it. These instances store important information like the target, property, starting value, amount of change, etc. They can also optionally have a number of "extra" strings and numeric values named xs1, xn1, xs2, xn2, xs3, xn3, etc. where "s" indicates string and "n" indicates number. These can be pieced together in a complex-value tween (type:1) that has alternating types of data like a string, number, string, number, etc. For example, boxShadow could be "5px 5px 8px rgb(102, 102, 51)". In that value, there are 6 numbers that may need to tween and then pieced back together into a string again with spaces, suffixes, etc. xs0 is special in that it stores the suffix for standard (type:0) tweens, -OR- the first string (prefix) in a complex-value (type:1) CSSPropTween -OR- it can be the non-tweening value in a type:-1 CSSPropTween. We do this to conserve memory. * CSSPropTweens have the following optional properties as well (not defined through the constructor): * - l: Length in terms of the number of extra properties that the CSSPropTween has (default: 0). For example, for a boxShadow we may need to tween 5 numbers in which case l would be 5; Keep in mind that the start/end values for the first number that's tweened are always stored in the s and c properties to conserve memory. All additional values thereafter are stored in xn1, xn2, etc. * - xfirst: The first instance of any sub-CSSPropTweens that are tweening properties of this instance. For example, we may split up a boxShadow tween so that there's a main CSSPropTween of type:1 that has various xs* and xn* values associated with the h-shadow, v-shadow, blur, color, etc. Then we spawn a CSSPropTween for each of those that has a higher priority and runs BEFORE the main CSSPropTween so that the values are all set by the time it needs to re-assemble them. The xfirst gives us an easy way to identify the first one in that chain which typically ends at the main one (because they're all prepende to the linked list) * - plugin: The TweenPlugin instance that will handle the tweening of any complex values. For example, sometimes we don't want to use normal subtweens (like xfirst refers to) to tween the values - we might want ThrowPropsPlugin or BezierPlugin some other plugin to do the actual tweening, so we create a plugin instance and store a reference here. We need this reference so that if we get a request to round values or disable a tween, we can pass along that request. * - data: Arbitrary data that needs to be stored with the CSSPropTween. Typically if we're going to have a plugin handle the tweening of a complex-value tween, we create a generic object that stores the END values that we're tweening to and the CSSPropTween's xs1, xs2, etc. have the starting values. We store that object as data. That way, we can simply pass that object to the plugin and use the CSSPropTween as the target. * - setRatio: Only used for type:2 tweens that require custom functionality. In this case, we call the CSSPropTween's setRatio() method and pass the ratio each time the tween updates. This isn't quite as efficient as doing things directly in the CSSPlugin's setRatio() method, but it's very convenient and flexible. * @param {!Object} t Target object whose property will be tweened. Often a DOM element, but not always. It could be anything. * @param {string} p Property to tween (name). For example, to tween element.width, p would be "width". * @param {number} s Starting numeric value * @param {number} c Change in numeric value over the course of the entire tween. For example, if element.width starts at 5 and should end at 100, c would be 95. * @param {CSSPropTween=} next The next CSSPropTween in the linked list. If one is defined, we will define its _prev as the new instance, and the new instance's _next will be pointed at it. * @param {number=} type The type of CSSPropTween where -1 = a non-tweening value, 0 = a standard simple tween, 1 = a complex value (like one that has multiple numbers in a comma- or space-delimited string like border:"1px solid red"), and 2 = one that uses a custom setRatio function that does all of the work of applying the values on each update. * @param {string=} n Name of the property that should be used for overwriting purposes which is typically the same as p but not always. For example, we may need to create a subtween for the 2nd part of a "clip:rect(...)" tween in which case "p" might be xs1 but "n" is still "clip" * @param {boolean=} r If true, the value(s) should be rounded * @param {number=} pr Priority in the linked list order. Higher priority CSSPropTweens will be updated before lower priority ones. The default priority is 0. * @param {string=} b Beginning value. We store this to ensure that it is EXACTLY what it was when the tween began without any risk of interpretation issues. * @param {string=} e Ending value. We store this to ensure that it is EXACTLY what the user defined at the end of the tween without any risk of interpretation issues. */ CSSPropTween = _internals.CSSPropTween = function(t, p, s, c, next, type, n, r, pr, b, e) { this.t = t; //target this.p = p; //property this.s = s; //starting value this.c = c; //change value this.n = n || p; //name that this CSSPropTween should be associated to (usually the same as p, but not always - n is what overwriting looks at) if (!(t instanceof CSSPropTween)) { _overwriteProps.push(this.n); } this.r = r; //round (boolean) this.type = type || 0; //0 = normal tween, -1 = non-tweening (in which case xs0 will be applied to the target's property, like tp.t[tp.p] = tp.xs0), 1 = complex-value SpecialProp, 2 = custom setRatio() that does all the work if (pr) { this.pr = pr; _hasPriority = true; } this.b = (b === undefined) ? s : b; this.e = (e === undefined) ? s + c : e; if (next) { this._next = next; next._prev = this; } }, _addNonTweeningNumericPT = function(target, prop, start, end, next, overwriteProp) { //cleans up some code redundancies and helps minification. Just a fast way to add a NUMERIC non-tweening CSSPropTween var pt = new CSSPropTween(target, prop, start, end - start, next, -1, overwriteProp); pt.b = start; pt.e = pt.xs0 = end; return pt; }, /** * Takes a target, the beginning value and ending value (as strings) and parses them into a CSSPropTween (possibly with child CSSPropTweens) that accommodates multiple numbers, colors, comma-delimited values, etc. For example: * sp.parseComplex(element, "boxShadow", "5px 10px 20px rgb(255,102,51)", "0px 0px 0px red", true, "0px 0px 0px rgb(0,0,0,0)", pt); * It will walk through the beginning and ending values (which should be in the same format with the same number and type of values) and figure out which parts are numbers, what strings separate the numeric/tweenable values, and then create the CSSPropTweens accordingly. If a plugin is defined, no child CSSPropTweens will be created. Instead, the ending values will be stored in the "data" property of the returned CSSPropTween like: {s:-5, xn1:-10, xn2:-20, xn3:255, xn4:0, xn5:0} so that it can be fed to any other plugin and it'll be plain numeric tweens but the recomposition of the complex value will be handled inside CSSPlugin's setRatio(). * If a setRatio is defined, the type of the CSSPropTween will be set to 2 and recomposition of the values will be the responsibility of that method. * * @param {!Object} t Target whose property will be tweened * @param {!string} p Property that will be tweened (its name, like "left" or "backgroundColor" or "boxShadow") * @param {string} b Beginning value * @param {string} e Ending value * @param {boolean} clrs If true, the value could contain a color value like "rgb(255,0,0)" or "#F00" or "red". The default is false, so no colors will be recognized (a performance optimization) * @param {(string|number|Object)} dflt The default beginning value that should be used if no valid beginning value is defined or if the number of values inside the complex beginning and ending values don't match * @param {?CSSPropTween} pt CSSPropTween instance that is the current head of the linked list (we'll prepend to this). * @param {number=} pr Priority in the linked list order. Higher priority properties will be updated before lower priority ones. The default priority is 0. * @param {TweenPlugin=} plugin If a plugin should handle the tweening of extra properties, pass the plugin instance here. If one is defined, then NO subtweens will be created for any extra properties (the properties will be created - just not additional CSSPropTween instances to tween them) because the plugin is expected to do so. However, the end values WILL be populated in the "data" property, like {s:100, xn1:50, xn2:300} * @param {function(number)=} setRatio If values should be set in a custom function instead of being pieced together in a type:1 (complex-value) CSSPropTween, define that custom function here. * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parseComplex() call. */ _parseComplex = CSSPlugin.parseComplex = function(t, p, b, e, clrs, dflt, pt, pr, plugin, setRatio) { //DEBUG: _log("parseComplex: "+p+", b: "+b+", e: "+e); b = b || dflt || ""; if (typeof(e) === "function") { e = e(_index, _target); } pt = new CSSPropTween(t, p, 0, 0, pt, (setRatio ? 2 : 1), null, false, pr, b, e); e += ""; //ensures it's a string if (clrs && _colorExp.test(e + b)) { //if colors are found, normalize the formatting to rgba() or hsla(). e = [b, e]; CSSPlugin.colorStringFilter(e); b = e[0]; e = e[1]; } var ba = b.split(", ").join(",").split(" "), //beginning array ea = e.split(", ").join(",").split(" "), //ending array l = ba.length, autoRound = (_autoRound !== false), i, xi, ni, bv, ev, bnums, enums, bn, hasAlpha, temp, cv, str, useHSL; if (e.indexOf(",") !== -1 || b.indexOf(",") !== -1) { ba = ba.join(" ").replace(_commasOutsideParenExp, ", ").split(" "); ea = ea.join(" ").replace(_commasOutsideParenExp, ", ").split(" "); l = ba.length; } if (l !== ea.length) { //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")"); ba = (dflt || "").split(" "); l = ba.length; } pt.plugin = plugin; pt.setRatio = setRatio; _colorExp.lastIndex = 0; for (i = 0; i < l; i++) { bv = ba[i]; ev = ea[i]; bn = parseFloat(bv); //if the value begins with a number (most common). It's fine if it has a suffix like px if (bn || bn === 0) { pt.appendXtra("", bn, _parseChange(ev, bn), ev.replace(_relNumExp, ""), (autoRound && ev.indexOf("px") !== -1), true); //if the value is a color } else if (clrs && _colorExp.test(bv)) { str = ev.indexOf(")") + 1; str = ")" + (str ? ev.substr(str) : ""); //if there's a comma or ) at the end, retain it. useHSL = (ev.indexOf("hsl") !== -1 && _supportsOpacity); bv = _parseColor(bv, useHSL); ev = _parseColor(ev, useHSL); hasAlpha = (bv.length + ev.length > 6); if (hasAlpha && !_supportsOpacity && ev[3] === 0) { //older versions of IE don't support rgba(), so if the destination alpha is 0, just use "transparent" for the end color pt["xs" + pt.l] += pt.l ? " transparent" : "transparent"; pt.e = pt.e.split(ea[i]).join("transparent"); } else { if (!_supportsOpacity) { //old versions of IE don't support rgba(). hasAlpha = false; } if (useHSL) { pt.appendXtra((hasAlpha ? "hsla(" : "hsl("), bv[0], _parseChange(ev[0], bv[0]), ",", false, true) .appendXtra("", bv[1], _parseChange(ev[1], bv[1]), "%,", false) .appendXtra("", bv[2], _parseChange(ev[2], bv[2]), (hasAlpha ? "%," : "%" + str), false); } else { pt.appendXtra((hasAlpha ? "rgba(" : "rgb("), bv[0], ev[0] - bv[0], ",", true, true) .appendXtra("", bv[1], ev[1] - bv[1], ",", true) .appendXtra("", bv[2], ev[2] - bv[2], (hasAlpha ? "," : str), true); } if (hasAlpha) { bv = (bv.length < 4) ? 1 : bv[3]; pt.appendXtra("", bv, ((ev.length < 4) ? 1 : ev[3]) - bv, str, false); } } _colorExp.lastIndex = 0; //otherwise the test() on the RegExp could move the lastIndex and taint future results. } else { bnums = bv.match(_numExp); //gets each group of numbers in the beginning value string and drops them into an array //if no number is found, treat it as a non-tweening value and just append the string to the current xs. if (!bnums) { pt["xs" + pt.l] += (pt.l || pt["xs" + pt.l]) ? " " + ev : ev; //loop through all the numbers that are found and construct the extra values on the pt. } else { enums = ev.match(_relNumExp); //get each group of numbers in the end value string and drop them into an array. We allow relative values too, like +=50 or -=.5 if (!enums || enums.length !== bnums.length) { //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")"); return pt; } ni = 0; for (xi = 0; xi < bnums.length; xi++) { cv = bnums[xi]; temp = bv.indexOf(cv, ni); pt.appendXtra(bv.substr(ni, temp - ni), Number(cv), _parseChange(enums[xi], cv), "", (autoRound && bv.substr(temp + cv.length, 2) === "px"), (xi === 0)); ni = temp + cv.length; } pt["xs" + pt.l] += bv.substr(ni); } } } //if there are relative values ("+=" or "-=" prefix), we need to adjust the ending value to eliminate the prefixes and combine the values properly. if (e.indexOf("=") !== -1) if (pt.data) { str = pt.xs0 + pt.data.s; for (i = 1; i < pt.l; i++) { str += pt["xs" + i] + pt.data["xn" + i]; } pt.e = str + pt["xs" + i]; } if (!pt.l) { pt.type = -1; pt.xs0 = pt.e; } return pt.xfirst || pt; }, i = 9; p = CSSPropTween.prototype; p.l = p.pr = 0; //length (number of extra properties like xn1, xn2, xn3, etc. while (--i > 0) { p["xn" + i] = 0; p["xs" + i] = ""; } p.xs0 = ""; p._next = p._prev = p.xfirst = p.data = p.plugin = p.setRatio = p.rxp = null; /** * Appends and extra tweening value to a CSSPropTween and automatically manages any prefix and suffix strings. The first extra value is stored in the s and c of the main CSSPropTween instance, but thereafter any extras are stored in the xn1, xn2, xn3, etc. The prefixes and suffixes are stored in the xs0, xs1, xs2, etc. properties. For example, if I walk through a clip value like "rect(10px, 5px, 0px, 20px)", the values would be stored like this: * xs0:"rect(", s:10, xs1:"px, ", xn1:5, xs2:"px, ", xn2:0, xs3:"px, ", xn3:20, xn4:"px)" * And they'd all get joined together when the CSSPlugin renders (in the setRatio() method). * @param {string=} pfx Prefix (if any) * @param {!number} s Starting value * @param {!number} c Change in numeric value over the course of the entire tween. For example, if the start is 5 and the end is 100, the change would be 95. * @param {string=} sfx Suffix (if any) * @param {boolean=} r Round (if true). * @param {boolean=} pad If true, this extra value should be separated by the previous one by a space. If there is no previous extra and pad is true, it will automatically drop the space. * @return {CSSPropTween} returns itself so that multiple methods can be chained together. */ p.appendXtra = function(pfx, s, c, sfx, r, pad) { var pt = this, l = pt.l; pt["xs" + l] += (pad && (l || pt["xs" + l])) ? " " + pfx : pfx || ""; if (!c) if (l !== 0 && !pt.plugin) { //typically we'll combine non-changing values right into the xs to optimize performance, but we don't combine them when there's a plugin that will be tweening the values because it may depend on the values being split apart, like for a bezier, if a value doesn't change between the first and second iteration but then it does on the 3rd, we'll run into trouble because there's no xn slot for that value! pt["xs" + l] += s + (sfx || ""); return pt; } pt.l++; pt.type = pt.setRatio ? 2 : 1; pt["xs" + pt.l] = sfx || ""; if (l > 0) { pt.data["xn" + l] = s + c; pt.rxp["xn" + l] = r; //round extra property (we need to tap into this in the _parseToProxy() method) pt["xn" + l] = s; if (!pt.plugin) { pt.xfirst = new CSSPropTween(pt, "xn" + l, s, c, pt.xfirst || pt, 0, pt.n, r, pt.pr); pt.xfirst.xs0 = 0; //just to ensure that the property stays numeric which helps modern browsers speed up processing. Remember, in the setRatio() method, we do pt.t[pt.p] = val + pt.xs0 so if pt.xs0 is "" (the default), it'll cast the end value as a string. When a property is a number sometimes and a string sometimes, it prevents the compiler from locking in the data type, slowing things down slightly. } return pt; } pt.data = {s:s + c}; pt.rxp = {}; pt.s = s; pt.c = c; pt.r = r; return pt; }; /** * @constructor A SpecialProp is basically a css property that needs to be treated in a non-standard way, like if it may contain a complex value like boxShadow:"5px 10px 15px rgb(255, 102, 51)" or if it is associated with another plugin like ThrowPropsPlugin or BezierPlugin. Every SpecialProp is associated with a particular property name like "boxShadow" or "throwProps" or "bezier" and it will intercept those values in the vars object that's passed to the CSSPlugin and handle them accordingly. * @param {!string} p Property name (like "boxShadow" or "throwProps") * @param {Object=} options An object containing any of the following configuration options: * - defaultValue: the default value * - parser: A function that should be called when the associated property name is found in the vars. This function should return a CSSPropTween instance and it should ensure that it is properly inserted into the linked list. It will receive 4 paramters: 1) The target, 2) The value defined in the vars, 3) The CSSPlugin instance (whose _firstPT should be used for the linked list), and 4) A computed style object if one was calculated (this is a speed optimization that allows retrieval of starting values quicker) * - formatter: a function that formats any value received for this special property (for example, boxShadow could take "5px 5px red" and format it to "5px 5px 0px 0px red" so that both the beginning and ending values have a common order and quantity of values.) * - prefix: if true, we'll determine whether or not this property requires a vendor prefix (like Webkit or Moz or ms or O) * - color: set this to true if the value for this SpecialProp may contain color-related values like rgb(), rgba(), etc. * - priority: priority in the linked list order. Higher priority SpecialProps will be updated before lower priority ones. The default priority is 0. * - multi: if true, the formatter should accommodate a comma-delimited list of values, like boxShadow could have multiple boxShadows listed out. * - collapsible: if true, the formatter should treat the value like it's a top/right/bottom/left value that could be collapsed, like "5px" would apply to all, "5px, 10px" would use 5px for top/bottom and 10px for right/left, etc. * - keyword: a special keyword that can [optionally] be found inside the value (like "inset" for boxShadow). This allows us to validate beginning/ending values to make sure they match (if the keyword is found in one, it'll be added to the other for consistency by default). */ var SpecialProp = function(p, options) { options = options || {}; this.p = options.prefix ? _checkPropPrefix(p) || p : p; _specialProps[p] = _specialProps[this.p] = this; this.format = options.formatter || _getFormatter(options.defaultValue, options.color, options.collapsible, options.multi); if (options.parser) { this.parse = options.parser; } this.clrs = options.color; this.multi = options.multi; this.keyword = options.keyword; this.dflt = options.defaultValue; this.pr = options.priority || 0; }, //shortcut for creating a new SpecialProp that can accept multiple properties as a comma-delimited list (helps minification). dflt can be an array for multiple values (we don't do a comma-delimited list because the default value may contain commas, like rect(0px,0px,0px,0px)). We attach this method to the SpecialProp class/object instead of using a private _createSpecialProp() method so that we can tap into it externally if necessary, like from another plugin. _registerComplexSpecialProp = _internals._registerComplexSpecialProp = function(p, options, defaults) { Iif (typeof(options) !== "object") { options = {parser:defaults}; //to make backwards compatible with older versions of BezierPlugin and ThrowPropsPlugin } var a = p.split(","), d = options.defaultValue, i, temp; defaults = defaults || [d]; for (i = 0; i < a.length; i++) { options.prefix = (i === 0 && options.prefix); options.defaultValue = defaults[i] || d; temp = new SpecialProp(a[i], options); } }, //creates a placeholder special prop for a plugin so that the property gets caught the first time a tween of it is attempted, and at that time it makes the plugin register itself, thus taking over for all future tweens of that property. This allows us to not mandate that things load in a particular order and it also allows us to log() an error that informs the user when they attempt to tween an external plugin-related property without loading its .js file. _registerPluginProp = _internals._registerPluginProp = function(p) { Eif (!_specialProps[p]) { var pluginName = p.charAt(0).toUpperCase() + p.substr(1) + "Plugin"; _registerComplexSpecialProp(p, {parser:function(t, e, p, cssp, pt, plugin, vars) { var pluginClass = _globals.com.greensock.plugins[pluginName]; if (!pluginClass) { _log("Error: " + pluginName + " js file not loaded."); return pt; } pluginClass._cssRegister(); return _specialProps[p].parse(t, e, p, cssp, pt, plugin, vars); }}); } }; p = SpecialProp.prototype; /** * Alias for _parseComplex() that automatically plugs in certain values for this SpecialProp, like its property name, whether or not colors should be sensed, the default value, and priority. It also looks for any keyword that the SpecialProp defines (like "inset" for boxShadow) and ensures that the beginning and ending values have the same number of values for SpecialProps where multi is true (like boxShadow and textShadow can have a comma-delimited list) * @param {!Object} t target element * @param {(string|number|object)} b beginning value * @param {(string|number|object)} e ending (destination) value * @param {CSSPropTween=} pt next CSSPropTween in the linked list * @param {TweenPlugin=} plugin If another plugin will be tweening the complex value, that TweenPlugin instance goes here. * @param {function=} setRatio If a custom setRatio() method should be used to handle this complex value, that goes here. * @return {CSSPropTween=} First CSSPropTween in the linked list */ p.parseComplex = function(t, b, e, pt, plugin, setRatio) { var kwd = this.keyword, i, ba, ea, l, bi, ei; //if this SpecialProp's value can contain a comma-delimited list of values (like boxShadow or textShadow), we must parse them in a special way, and look for a keyword (like "inset" for boxShadow) and ensure that the beginning and ending BOTH have it if the end defines it as such. We also must ensure that there are an equal number of values specified (we can't tween 1 boxShadow to 3 for example) if (this.multi) if (_commasOutsideParenExp.test(e) || _commasOutsideParenExp.test(b)) { ba = b.replace(_commasOutsideParenExp, "|").split("|"); ea = e.replace(_commasOutsideParenExp, "|").split("|"); } else if (kwd) { ba = [b]; ea = [e]; } if (ea) { l = (ea.length > ba.length) ? ea.length : ba.length; for (i = 0; i < l; i++) { b = ba[i] = ba[i] || this.dflt; e = ea[i] = ea[i] || this.dflt; if (kwd) { bi = b.indexOf(kwd); ei = e.indexOf(kwd); if (bi !== ei) { if (ei === -1) { //if the keyword isn't in the end value, remove it from the beginning one. ba[i] = ba[i].split(kwd).join(""); } else if (bi === -1) { //if the keyword isn't in the beginning, add it. ba[i] += " " + kwd; } } } } b = ba.join(", "); e = ea.join(", "); } return _parseComplex(t, this.p, b, e, this.clrs, this.dflt, pt, this.pr, plugin, setRatio); }; /** * Accepts a target and end value and spits back a CSSPropTween that has been inserted into the CSSPlugin's linked list and conforms with all the conventions we use internally, like type:-1, 0, 1, or 2, setting up any extra property tweens, priority, etc. For example, if we have a boxShadow SpecialProp and call: * this._firstPT = sp.parse(element, "5px 10px 20px rgb(2550,102,51)", "boxShadow", this); * It should figure out the starting value of the element's boxShadow, compare it to the provided end value and create all the necessary CSSPropTweens of the appropriate types to tween the boxShadow. The CSSPropTween that gets spit back should already be inserted into the linked list (the 4th parameter is the current head, so prepend to that). * @param {!Object} t Target object whose property is being tweened * @param {Object} e End value as provided in the vars object (typically a string, but not always - like a throwProps would be an object). * @param {!string} p Property name * @param {!CSSPlugin} cssp The CSSPlugin instance that should be associated with this tween. * @param {?CSSPropTween} pt The CSSPropTween that is the current head of the linked list (we'll prepend to it) * @param {TweenPlugin=} plugin If a plugin will be used to tween the parsed value, this is the plugin instance. * @param {Object=} vars Original vars object that contains the data for parsing. * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parse() call. */ p.parse = function(t, e, p, cssp, pt, plugin, vars) { return this.parseComplex(t.style, this.format(_getStyle(t, this.p, _cs, false, this.dflt)), this.format(e), pt, plugin); }; /** * Registers a special property that should be intercepted from any "css" objects defined in tweens. This allows you to handle them however you want without CSSPlugin doing it for you. The 2nd parameter should be a function that accepts 3 parameters: * 1) Target object whose property should be tweened (typically a DOM element) * 2) The end/destination value (could be a string, number, object, or whatever you want) * 3) The tween instance (you probably don't need to worry about this, but it can be useful for looking up information like the duration) * * Then, your function should return a function which will be called each time the tween gets rendered, passing a numeric "ratio" parameter to your function that indicates the change factor (usually between 0 and 1). For example: * * CSSPlugin.registerSpecialProp("myCustomProp", function(target, value, tween) { * var start = target.style.width; * return function(ratio) { * target.style.width = (start + value * ratio) + "px"; * console.log("set width to " + target.style.width); * } * }, 0); * * Then, when I do this tween, it will trigger my special property: * * TweenLite.to(element, 1, {css:{myCustomProp:100}}); * * In the example, of course, we're just changing the width, but you can do anything you want. * * @param {!string} name Property name (or comma-delimited list of property names) that should be intercepted and handled by your function. For example, if I define "myCustomProp", then it would handle that portion of the following tween: TweenLite.to(element, 1, {css:{myCustomProp:100}}) * @param {!function(Object, Object, Object, string):function(number)} onInitTween The function that will be called when a tween of this special property is performed. The function will receive 4 parameters: 1) Target object that should be tweened, 2) Value that was passed to the tween, 3) The tween instance itself (rarely used), and 4) The property name that's being tweened. Your function should return a function that should be called on every update of the tween. That function will receive a single parameter that is a "change factor" value (typically between 0 and 1) indicating the amount of change as a ratio. You can use this to determine how to set the values appropriately in your function. * @param {number=} priority Priority that helps the engine determine the order in which to set the properties (default: 0). Higher priority properties will be updated before lower priority ones. */ CSSPlugin.registerSpecialProp = function(name, onInitTween, priority) { _registerComplexSpecialProp(name, {parser:function(t, e, p, cssp, pt, plugin, vars) { var rv = new CSSPropTween(t, p, 0, 0, pt, 2, p, false, priority); rv.plugin = plugin; rv.setRatio = onInitTween(t, e, cssp._tween, p); return rv; }, priority:priority}); }; //transform-related methods and properties CSSPlugin.useSVGTransformAttr = true; //Safari and Firefox both have some rendering bugs when applying CSS transforms to SVG elements, so default to using the "transform" attribute instead (users can override this). var _transformProps = ("scaleX,scaleY,scaleZ,x,y,z,skewX,skewY,rotation,rotationX,rotationY,perspective,xPercent,yPercent").split(","), _transformProp = _checkPropPrefix("transform"), //the Javascript (camelCase) transform property, like msTransform, WebkitTransform, MozTransform, or OTransform. _transformPropCSS = _prefixCSS + "transform", _transformOriginProp = _checkPropPrefix("transformOrigin"), _supports3D = (_checkPropPrefix("perspective") !== null), Transform = _internals.Transform = function() { this.perspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0; this.force3D = (CSSPlugin.defaultForce3D === false || !_supports3D) ? false : CSSPlugin.defaultForce3D || "auto"; }, _SVGElement = _gsScope.SVGElement, _useSVGTransformAttr, //Some browsers (like Firefox and IE) don't honor transform-origin properly in SVG elements, so we need to manually adjust the matrix accordingly. We feature detect here rather than always doing the conversion for certain browsers because they may fix the problem at some point in the future. _createSVG = function(type, container, attributes) { var element = _doc.createElementNS("http://www.w3.org/2000/svg", type), reg = /([a-z])([A-Z])/g, p; for (p in attributes) { element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]); } container.appendChild(element); return element; }, _docElement = _doc.documentElement || {}, _forceSVGTransformAttr = (function() { //IE and Android stock don't support CSS transforms on SVG elements, so we must write them to the "transform" attribute. We populate this variable in the _parseTransform() method, and only if/when we come across an SVG element var force = _ieVers || (/Android/i.test(_agent) && !_gsScope.chrome), svg, rect, width; Iif (_doc.createElementNS && !force) { //IE8 and earlier doesn't support SVG anyway svg = _createSVG("svg", _docElement); rect = _createSVG("rect", svg, {width:100, height:50, x:100}); width = rect.getBoundingClientRect().width; rect.style[_transformOriginProp] = "50% 50%"; rect.style[_transformProp] = "scaleX(0.5)"; force = (width === rect.getBoundingClientRect().width && !(_isFirefox && _supports3D)); //note: Firefox fails the test even though it does support CSS transforms in 3D. Since we can't push 3D stuff into the transform attribute, we force Firefox to pass the test here (as long as it does truly support 3D). _docElement.removeChild(svg); } return force; })(), _parseSVGOrigin = function(e, local, decoratee, absolute, smoothOrigin, skipRecord) { var tm = e._gsTransform, m = _getMatrix(e, true), v, x, y, xOrigin, yOrigin, a, b, c, d, tx, ty, determinant, xOriginOld, yOriginOld; if (tm) { xOriginOld = tm.xOrigin; //record the original values before we alter them. yOriginOld = tm.yOrigin; } if (!absolute || (v = absolute.split(" ")).length < 2) { b = e.getBBox(); if (b.x === 0 && b.y === 0 && b.width + b.height === 0) { //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case. b = {x: parseFloat(e.hasAttribute("x") ? e.getAttribute("x") : e.hasAttribute("cx") ? e.getAttribute("cx") : 0) || 0, y: parseFloat(e.hasAttribute("y") ? e.getAttribute("y") : e.hasAttribute("cy") ? e.getAttribute("cy") : 0) || 0, width:0, height:0}; } local = _parsePosition(local).split(" "); v = [(local[0].indexOf("%") !== -1 ? parseFloat(local[0]) / 100 * b.width : parseFloat(local[0])) + b.x, (local[1].indexOf("%") !== -1 ? parseFloat(local[1]) / 100 * b.height : parseFloat(local[1])) + b.y]; } decoratee.xOrigin = xOrigin = parseFloat(v[0]); decoratee.yOrigin = yOrigin = parseFloat(v[1]); if (absolute && m !== _identity2DMatrix) { //if svgOrigin is being set, we must invert the matrix and determine where the absolute point is, factoring in the current transforms. Otherwise, the svgOrigin would be based on the element's non-transformed position on the canvas. a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; determinant = (a * d - b * c); if (determinant) { //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero. x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + ((c * ty - d * tx) / determinant); y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - ((a * ty - b * tx) / determinant); xOrigin = decoratee.xOrigin = v[0] = x; yOrigin = decoratee.yOrigin = v[1] = y; } } if (tm) { //avoid jump when transformOrigin is changed - adjust the x/y values accordingly if (skipRecord) { decoratee.xOffset = tm.xOffset; decoratee.yOffset = tm.yOffset; tm = decoratee; } if (smoothOrigin || (smoothOrigin !== false && CSSPlugin.defaultSmoothOrigin !== false)) { x = xOrigin - xOriginOld; y = yOrigin - yOriginOld; //originally, we simply adjusted the x and y values, but that would cause problems if, for example, you created a rotational tween part-way through an x/y tween. Managing the offset in a separate variable gives us ultimate flexibility. //tm.x -= x - (x * m[0] + y * m[2]); //tm.y -= y - (x * m[1] + y * m[3]); tm.xOffset += (x * m[0] + y * m[2]) - x; tm.yOffset += (x * m[1] + y * m[3]) - y; } else { tm.xOffset = tm.yOffset = 0; } } if (!skipRecord) { e.setAttribute("data-svg-origin", v.join(" ")); } }, _getBBoxHack = function(swapIfPossible) { //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a <defs> element and/or <mask>. We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it). var svg = _createElement("svg", this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"), oldParent = this.parentNode, oldSibling = this.nextSibling, oldCSS = this.style.cssText, bbox; _docElement.appendChild(svg); svg.appendChild(this); this.style.display = "block"; if (swapIfPossible) { try { bbox = this.getBBox(); this._originalGetBBox = this.getBBox; this.getBBox = _getBBoxHack; } catch (e) { } } else if (this._originalGetBBox) { bbox = this._originalGetBBox(); } if (oldSibling) { oldParent.insertBefore(this, oldSibling); } else { oldParent.appendChild(this); } _docElement.removeChild(svg); this.style.cssText = oldCSS; return bbox; }, _getBBox = function(e) { try { return e.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a <symbol> or <defs>). https://bugzilla.mozilla.org/show_bug.cgi?id=612118 } catch (error) { return _getBBoxHack.call(e, true); } }, _isSVG = function(e) { //reports if the element is an SVG on which getBBox() actually works return !!(_SVGElement && e.getCTM && _getBBox(e) && (!e.parentNode || e.ownerSVGElement)); }, _identity2DMatrix = [1,0,0,1,0,0], _getMatrix = function(e, force2D) { var tm = e._gsTransform || new Transform(), rnd = 100000, style = e.style, isDefault, s, m, n, dec, none; if (_transformProp) { s = _getStyle(e, _transformPropCSS, null, true); } else if (e.currentStyle) { //for older versions of IE, we need to interpret the filter portion that is in the format: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand') Notice that we need to swap b and c compared to a normal matrix. s = e.currentStyle.filter.match(_ieGetMatrixExp); s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : ""; } isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)"); if (isDefault && _transformProp && ((none = (_getComputedStyle(e).display === "none")) || !e.parentNode)) { if (none) { //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". n = style.display; style.display = "block"; } if (!e.parentNode) { dec = 1; //flag _docElement.appendChild(e); } s = _getStyle(e, _transformPropCSS, null, true); isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)"); if (n) { style.display = n; } else if (none) { _removeProp(style, "display"); } if (dec) { _docElement.removeChild(e); } } if (tm.svg || (e.getCTM && _isSVG(e))) { if (isDefault && (style[_transformProp] + "").indexOf("matrix") !== -1) { //some browsers (like Chrome 40) don't correctly report transforms that are applied inline on an SVG element (they don't get included in the computed style), so we double-check here and accept matrix values s = style[_transformProp]; isDefault = 0; } m = e.getAttribute("transform"); if (isDefault && m) { if (m.indexOf("matrix") !== -1) { //just in case there's a "transform" value specified as an attribute instead of CSS style. Accept either a matrix() or simple translate() value though. s = m; isDefault = 0; } else if (m.indexOf("translate") !== -1) { s = "matrix(1,0,0,1," + m.match(/(?:\-|\b)[\d\-\.e]+\b/gi).join(",") + ")"; isDefault = 0; } } } if (isDefault) { return _identity2DMatrix; } //split the matrix values out into an array (m for matrix) m = (s || "").match(_numExp) || []; i = m.length; while (--i > -1) { n = Number(m[i]); m[i] = (dec = n - (n |= 0)) ? ((dec * rnd + (dec < 0 ? -0.5 : 0.5)) | 0) / rnd + n : n; //convert strings to Numbers and round to 5 decimal places to avoid issues with tiny numbers. Roughly 20x faster than Number.toFixed(). We also must make sure to round before dividing so that values like 0.9999999999 become 1 to avoid glitches in browser rendering and interpretation of flipped/rotated 3D matrices. And don't just multiply the number by rnd, floor it, and then divide by rnd because the bitwise operations max out at a 32-bit signed integer, thus it could get clipped at a relatively low value (like 22,000.00000 for example). } return (force2D && m.length > 6) ? [m[0], m[1], m[4], m[5], m[12], m[13]] : m; }, /** * Parses the transform values for an element, returning an object with x, y, z, scaleX, scaleY, scaleZ, rotation, rotationX, rotationY, skewX, and skewY properties. Note: by default (for performance reasons), all skewing is combined into skewX and rotation but skewY still has a place in the transform object so that we can record how much of the skew is attributed to skewX vs skewY. Remember, a skewY of 10 looks the same as a rotation of 10 and skewX of -10. * @param {!Object} t target element * @param {Object=} cs computed style object (optional) * @param {boolean=} rec if true, the transform values will be recorded to the target element's _gsTransform object, like target._gsTransform = {x:0, y:0, z:0, scaleX:1...} * @param {boolean=} parse if true, we'll ignore any _gsTransform values that already exist on the element, and force a reparsing of the css (calculated style) * @return {object} object containing all of the transform properties/values like {x:0, y:0, z:0, scaleX:1...} */ _getTransform = _internals.getTransform = function(t, cs, rec, parse) { if (t._gsTransform && rec && !parse) { return t._gsTransform; //if the element already has a _gsTransform, use that. Note: some browsers don't accurately return the calculated style for the transform (particularly for SVG), so it's almost always safest to just use the values we've already applied rather than re-parsing things. } var tm = rec ? t._gsTransform || new Transform() : new Transform(), invX = (tm.scaleX < 0), //in order to interpret things properly, we need to know if the user applied a negative scaleX previously so that we can adjust the rotation and skewX accordingly. Otherwise, if we always interpret a flipped matrix as affecting scaleY and the user only wants to tween the scaleX on multiple sequential tweens, it would keep the negative scaleY without that being the user's intent. min = 0.00002, rnd = 100000, zOrigin = _supports3D ? parseFloat(_getStyle(t, _transformOriginProp, cs, false, "0 0 0").split(" ")[2]) || tm.zOrigin || 0 : 0, defaultTransformPerspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0, m, i, scaleX, scaleY, rotation, skewX; tm.svg = !!(t.getCTM && _isSVG(t)); if (tm.svg) { _parseSVGOrigin(t, _getStyle(t, _transformOriginProp, cs, false, "50% 50%") + "", tm, t.getAttribute("data-svg-origin")); _useSVGTransformAttr = CSSPlugin.useSVGTransformAttr || _forceSVGTransformAttr; } m = _getMatrix(t); if (m !== _identity2DMatrix) { if (m.length === 16) { //we'll only look at these position-related 6 variables first because if x/y/z all match, it's relatively safe to assume we don't need to re-parse everything which risks losing important rotational information (like rotationX:180 plus rotationY:180 would look the same as rotation:180 - there's no way to know for sure which direction was taken based solely on the matrix3d() values) var a11 = m[0], a21 = m[1], a31 = m[2], a41 = m[3], a12 = m[4], a22 = m[5], a32 = m[6], a42 = m[7], a13 = m[8], a23 = m[9], a33 = m[10], a14 = m[12], a24 = m[13], a34 = m[14], a43 = m[11], angle = Math.atan2(a32, a33), t1, t2, t3, t4, cos, sin; //we manually compensate for non-zero z component of transformOrigin to work around bugs in Safari if (tm.zOrigin) { a34 = -tm.zOrigin; a14 = a13*a34-m[12]; a24 = a23*a34-m[13]; a34 = a33*a34+tm.zOrigin-m[14]; } tm.rotationX = angle * _RAD2DEG; //rotationX if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); t1 = a12*cos+a13*sin; t2 = a22*cos+a23*sin; t3 = a32*cos+a33*sin; a13 = a12*-sin+a13*cos; a23 = a22*-sin+a23*cos; a33 = a32*-sin+a33*cos; a43 = a42*-sin+a43*cos; a12 = t1; a22 = t2; a32 = t3; } //rotationY angle = Math.atan2(-a31, a33); tm.rotationY = angle * _RAD2DEG; if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); t1 = a11*cos-a13*sin; t2 = a21*cos-a23*sin; t3 = a31*cos-a33*sin; a23 = a21*sin+a23*cos; a33 = a31*sin+a33*cos; a43 = a41*sin+a43*cos; a11 = t1; a21 = t2; a31 = t3; } //rotationZ angle = Math.atan2(a21, a11); tm.rotation = angle * _RAD2DEG; if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); a11 = a11*cos+a12*sin; t2 = a21*cos+a22*sin; a22 = a21*-sin+a22*cos; a32 = a31*-sin+a32*cos; a21 = t2; } if (tm.rotationX && Math.abs(tm.rotationX) + Math.abs(tm.rotation) > 359.9) { //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here. tm.rotationX = tm.rotation = 0; tm.rotationY = 180 - tm.rotationY; } tm.scaleX = ((Math.sqrt(a11 * a11 + a21 * a21) * rnd + 0.5) | 0) / rnd; tm.scaleY = ((Math.sqrt(a22 * a22 + a23 * a23) * rnd + 0.5) | 0) / rnd; tm.scaleZ = ((Math.sqrt(a32 * a32 + a33 * a33) * rnd + 0.5) | 0) / rnd; if (tm.rotationX || tm.rotationY) { tm.skewX = 0; } else { tm.skewX = (a12 || a22) ? Math.atan2(a12, a22) * _RAD2DEG + tm.rotation : tm.skewX || 0; if (Math.abs(tm.skewX) > 90 && Math.abs(tm.skewX) < 270) { if (invX) { tm.scaleX *= -1; tm.skewX += (tm.rotation <= 0) ? 180 : -180; tm.rotation += (tm.rotation <= 0) ? 180 : -180; } else { tm.scaleY *= -1; tm.skewX += (tm.skewX <= 0) ? 180 : -180; } } } tm.perspective = a43 ? 1 / ((a43 < 0) ? -a43 : a43) : 0; tm.x = a14; tm.y = a24; tm.z = a34; if (tm.svg) { tm.x -= tm.xOrigin - (tm.xOrigin * a11 - tm.yOrigin * a12); tm.y -= tm.yOrigin - (tm.yOrigin * a21 - tm.xOrigin * a22); } } else if ((!_supports3D || parse || !m.length || tm.x !== m[4] || tm.y !== m[5] || (!tm.rotationX && !tm.rotationY))) { //sometimes a 6-element matrix is returned even when we performed 3D transforms, like if rotationX and rotationY are 180. In cases like this, we still need to honor the 3D transforms. If we just rely on the 2D info, it could affect how the data is interpreted, like scaleY might get set to -1 or rotation could get offset by 180 degrees. For example, do a TweenLite.to(element, 1, {css:{rotationX:180, rotationY:180}}) and then later, TweenLite.to(element, 1, {css:{rotationX:0}}) and without this conditional logic in place, it'd jump to a state of being unrotated when the 2nd tween starts. Then again, we need to honor the fact that the user COULD alter the transforms outside of CSSPlugin, like by manually applying new css, so we try to sense that by looking at x and y because if those changed, we know the changes were made outside CSSPlugin and we force a reinterpretation of the matrix values. Also, in Webkit browsers, if the element's "display" is "none", its calculated style value will always return empty, so if we've already recorded the values in the _gsTransform object, we'll just rely on those. var k = (m.length >= 6), a = k ? m[0] : 1, b = m[1] || 0, c = m[2] || 0, d = k ? m[3] : 1; tm.x = m[4] || 0; tm.y = m[5] || 0; scaleX = Math.sqrt(a * a + b * b); scaleY = Math.sqrt(d * d + c * c); rotation = (a || b) ? Math.atan2(b, a) * _RAD2DEG : tm.rotation || 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist). skewX = (c || d) ? Math.atan2(c, d) * _RAD2DEG + rotation : tm.skewX || 0; if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) { if (invX) { scaleX *= -1; skewX += (rotation <= 0) ? 180 : -180; rotation += (rotation <= 0) ? 180 : -180; } else { scaleY *= -1; skewX += (skewX <= 0) ? 180 : -180; } } tm.scaleX = scaleX; tm.scaleY = scaleY; tm.rotation = rotation; tm.skewX = skewX; if (_supports3D) { tm.rotationX = tm.rotationY = tm.z = 0; tm.perspective = defaultTransformPerspective; tm.scaleZ = 1; } if (tm.svg) { tm.x -= tm.xOrigin - (tm.xOrigin * a + tm.yOrigin * c); tm.y -= tm.yOrigin - (tm.xOrigin * b + tm.yOrigin * d); } } tm.zOrigin = zOrigin; //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 0 in these cases. The conditional logic here is faster than calling Math.abs(). Also, browsers tend to render a SLIGHTLY rotated object in a fuzzy way, so we need to snap to exactly 0 when appropriate. for (i in tm) { if (tm[i] < min) if (tm[i] > -min) { tm[i] = 0; } } } //DEBUG: _log("parsed rotation of " + t.getAttribute("id")+": "+(tm.rotationX)+", "+(tm.rotationY)+", "+(tm.rotation)+", scale: "+tm.scaleX+", "+tm.scaleY+", "+tm.scaleZ+", position: "+tm.x+", "+tm.y+", "+tm.z+", perspective: "+tm.perspective+ ", origin: "+ tm.xOrigin+ ","+ tm.yOrigin); if (rec) { t._gsTransform = tm; //record to the object's _gsTransform which we use so that tweens can control individual properties independently (we need all the properties to accurately recompose the matrix in the setRatio() method) if (tm.svg) { //if we're supposed to apply transforms to the SVG element's "transform" attribute, make sure there aren't any CSS transforms applied or they'll override the attribute ones. Also clear the transform attribute if we're using CSS, just to be clean. if (_useSVGTransformAttr && t.style[_transformProp]) { TweenLite.delayedCall(0.001, function(){ //if we apply this right away (before anything has rendered), we risk there being no transforms for a brief moment and it also interferes with adjusting the transformOrigin in a tween with immediateRender:true (it'd try reading the matrix and it wouldn't have the appropriate data in place because we just removed it). _removeProp(t.style, _transformProp); }); } else if (!_useSVGTransformAttr && t.getAttribute("transform")) { TweenLite.delayedCall(0.001, function(){ t.removeAttribute("transform"); }); } } } return tm; }, //for setting 2D transforms in IE6, IE7, and IE8 (must use a "filter" to emulate the behavior of modern day browser transforms) _setIETransformRatio = function(v) { var t = this.data, //refers to the element's _gsTransform object ang = -t.rotation * _DEG2RAD, skew = ang + t.skewX * _DEG2RAD, rnd = 100000, a = ((Math.cos(ang) * t.scaleX * rnd) | 0) / rnd, b = ((Math.sin(ang) * t.scaleX * rnd) | 0) / rnd, c = ((Math.sin(skew) * -t.scaleY * rnd) | 0) / rnd, d = ((Math.cos(skew) * t.scaleY * rnd) | 0) / rnd, style = this.t.style, cs = this.t.currentStyle, filters, val; if (!cs) { return; } val = b; //just for swapping the variables an inverting them (reused "val" to avoid creating another variable in memory). IE's filter matrix uses a non-standard matrix configuration (angle goes the opposite way, and b and c are reversed and inverted) b = -c; c = -val; filters = cs.filter; style.filter = ""; //remove filters so that we can accurately measure offsetWidth/offsetHeight var w = this.t.offsetWidth, h = this.t.offsetHeight, clip = (cs.position !== "absolute"), m = "progid:DXImageTransform.Microsoft.Matrix(M11=" + a + ", M12=" + b + ", M21=" + c + ", M22=" + d, ox = t.x + (w * t.xPercent / 100), oy = t.y + (h * t.yPercent / 100), dx, dy; //if transformOrigin is being used, adjust the offset x and y if (t.ox != null) { dx = ((t.oxp) ? w * t.ox * 0.01 : t.ox) - w / 2; dy = ((t.oyp) ? h * t.oy * 0.01 : t.oy) - h / 2; ox += dx - (dx * a + dy * b); oy += dy - (dx * c + dy * d); } if (!clip) { m += ", sizingMethod='auto expand')"; } else { dx = (w / 2); dy = (h / 2); //translate to ensure that transformations occur around the correct origin (default is center). m += ", Dx=" + (dx - (dx * a + dy * b) + ox) + ", Dy=" + (dy - (dx * c + dy * d) + oy) + ")"; } if (filters.indexOf("DXImageTransform.Microsoft.Matrix(") !== -1) { style.filter = filters.replace(_ieSetMatrixExp, m); } else { style.filter = m + " " + filters; //we must always put the transform/matrix FIRST (before alpha(opacity=xx)) to avoid an IE bug that slices part of the object when rotation is applied with alpha. } //at the end or beginning of the tween, if the matrix is normal (1, 0, 0, 1) and opacity is 100 (or doesn't exist), remove the filter to improve browser performance. if (v === 0 || v === 1) if (a === 1) if (b === 0) if (c === 0) if (d === 1) if (!clip || m.indexOf("Dx=0, Dy=0") !== -1) if (!_opacityExp.test(filters) || parseFloat(RegExp.$1) === 100) if (filters.indexOf("gradient(" && filters.indexOf("Alpha")) === -1) { style.removeAttribute("filter"); } //we must set the margins AFTER applying the filter in order to avoid some bugs in IE8 that could (in rare scenarios) cause them to be ignored intermittently (vibration). if (!clip) { var mult = (_ieVers < 8) ? 1 : -1, //in Internet Explorer 7 and before, the box model is broken, causing the browser to treat the width/height of the actual rotated filtered image as the width/height of the box itself, but Microsoft corrected that in IE8. We must use a negative offset in IE8 on the right/bottom marg, prop, dif; dx = t.ieOffsetX || 0; dy = t.ieOffsetY || 0; t.ieOffsetX = Math.round((w - ((a < 0 ? -a : a) * w + (b < 0 ? -b : b) * h)) / 2 + ox); t.ieOffsetY = Math.round((h - ((d < 0 ? -d : d) * h + (c < 0 ? -c : c) * w)) / 2 + oy); for (i = 0; i < 4; i++) { prop = _margins[i]; marg = cs[prop]; //we need to get the current margin in case it is being tweened separately (we want to respect that tween's changes) val = (marg.indexOf("px") !== -1) ? parseFloat(marg) : _convertToPixels(this.t, prop, parseFloat(marg), marg.replace(_suffixExp, "")) || 0; if (val !== t[prop]) { dif = (i < 2) ? -t.ieOffsetX : -t.ieOffsetY; //if another tween is controlling a margin, we cannot only apply the difference in the ieOffsets, so we essentially zero-out the dx and dy here in that case. We record the margin(s) later so that we can keep comparing them, making this code very flexible. } else { dif = (i < 2) ? dx - t.ieOffsetX : dy - t.ieOffsetY; } style[prop] = (t[prop] = Math.round( val - dif * ((i === 0 || i === 2) ? 1 : mult) )) + "px"; } } }, /* translates a super small decimal to a string WITHOUT scientific notation _safeDecimal = function(n) { var s = (n < 0 ? -n : n) + "", a = s.split("e-"); return (n < 0 ? "-0." : "0.") + new Array(parseInt(a[1], 10) || 0).join("0") + a[0].split(".").join(""); }, */ _setTransformRatio = _internals.set3DTransformRatio = _internals.setTransformRatio = function(v) { var t = this.data, //refers to the element's _gsTransform object style = this.t.style, angle = t.rotation, rotationX = t.rotationX, rotationY = t.rotationY, sx = t.scaleX, sy = t.scaleY, sz = t.scaleZ, x = t.x, y = t.y, z = t.z, isSVG = t.svg, perspective = t.perspective, force3D = t.force3D, skewY = t.skewY, skewX = t.skewX, t1, a11, a12, a13, a21, a22, a23, a31, a32, a33, a41, a42, a43, zOrigin, min, cos, sin, t2, transform, comma, zero, skew, rnd; if (skewY) { //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees. skewX += skewY; angle += skewY; } //check to see if we should render as 2D (and SVGs must use 2D when _useSVGTransformAttr is true) if (((((v === 1 || v === 0) && force3D === "auto" && (this.tween._totalTime === this.tween._totalDuration || !this.tween._totalTime)) || !force3D) && !z && !perspective && !rotationY && !rotationX && sz === 1) || (_useSVGTransformAttr && isSVG) || !_supports3D) { //on the final render (which could be 0 for a from tween), if there are no 3D aspects, render in 2D to free up memory and improve performance especially on mobile devices. Check the tween's totalTime/totalDuration too in order to make sure it doesn't happen between repeats if it's a repeating tween. //2D if (angle || skewX || isSVG) { angle *= _DEG2RAD; skew = skewX * _DEG2RAD; rnd = 100000; a11 = Math.cos(angle) * sx; a21 = Math.sin(angle) * sx; a12 = Math.sin(angle - skew) * -sy; a22 = Math.cos(angle - skew) * sy; if (skew && t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does t1 = Math.tan(skew - skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a12 *= t1; a22 *= t1; if (skewY) { t1 = Math.tan(skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a11 *= t1; a21 *= t1; } } if (isSVG) { x += t.xOrigin - (t.xOrigin * a11 + t.yOrigin * a12) + t.xOffset; y += t.yOrigin - (t.xOrigin * a21 + t.yOrigin * a22) + t.yOffset; if (_useSVGTransformAttr && (t.xPercent || t.yPercent)) { //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the matrix to simulate it. min = this.t.getBBox(); x += t.xPercent * 0.01 * min.width; y += t.yPercent * 0.01 * min.height; } min = 0.000001; if (x < min) if (x > -min) { x = 0; } if (y < min) if (y > -min) { y = 0; } } transform = (((a11 * rnd) | 0) / rnd) + "," + (((a21 * rnd) | 0) / rnd) + "," + (((a12 * rnd) | 0) / rnd) + "," + (((a22 * rnd) | 0) / rnd) + "," + x + "," + y + ")"; if (isSVG && _useSVGTransformAttr) { this.t.setAttribute("transform", "matrix(" + transform); } else { //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 5 decimal places. style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix(" : "matrix(") + transform; } } else { style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix(" : "matrix(") + sx + ",0,0," + sy + "," + x + "," + y + ")"; } return; } if (_isFirefox) { //Firefox has a bug (at least in v25) that causes it to render the transparent part of 32-bit PNG images as black when displayed inside an iframe and the 3D scale is very small and doesn't change sufficiently enough between renders (like if you use a Power4.easeInOut to scale from 0 to 1 where the beginning values only change a tiny amount to begin the tween before accelerating). In this case, we force the scale to be 0.00002 instead which is visually the same but works around the Firefox issue. min = 0.0001; if (sx < min && sx > -min) { sx = sz = 0.00002; } if (sy < min && sy > -min) { sy = sz = 0.00002; } if (perspective && !t.z && !t.rotationX && !t.rotationY) { //Firefox has a bug that causes elements to have an odd super-thin, broken/dotted black border on elements that have a perspective set but aren't utilizing 3D space (no rotationX, rotationY, or z). perspective = 0; } } if (angle || skewX) { angle *= _DEG2RAD; cos = a11 = Math.cos(angle); sin = a21 = Math.sin(angle); if (skewX) { angle -= skewX * _DEG2RAD; cos = Math.cos(angle); sin = Math.sin(angle); if (t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does t1 = Math.tan((skewX - skewY) * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); cos *= t1; sin *= t1; if (t.skewY) { t1 = Math.tan(skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a11 *= t1; a21 *= t1; } } } a12 = -sin; a22 = cos; } else if (!rotationY && !rotationX && sz === 1 && !perspective && !isSVG) { //if we're only translating and/or 2D scaling, this is faster... style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) translate3d(" : "translate3d(") + x + "px," + y + "px," + z +"px)" + ((sx !== 1 || sy !== 1) ? " scale(" + sx + "," + sy + ")" : ""); return; } else { a11 = a22 = 1; a12 = a21 = 0; } // KEY INDEX AFFECTS // a11 0 rotation, rotationY, scaleX // a21 1 rotation, rotationY, scaleX // a31 2 rotationY, scaleX // a41 3 rotationY, scaleX // a12 4 rotation, skewX, rotationX, scaleY // a22 5 rotation, skewX, rotationX, scaleY // a32 6 rotationX, scaleY // a42 7 rotationX, scaleY // a13 8 rotationY, rotationX, scaleZ // a23 9 rotationY, rotationX, scaleZ // a33 10 rotationY, rotationX, scaleZ // a43 11 rotationY, rotationX, perspective, scaleZ // a14 12 x, zOrigin, svgOrigin // a24 13 y, zOrigin, svgOrigin // a34 14 z, zOrigin // a44 15 // rotation: Math.atan2(a21, a11) // rotationY: Math.atan2(a13, a33) (or Math.atan2(a13, a11)) // rotationX: Math.atan2(a32, a33) a33 = 1; a13 = a23 = a31 = a32 = a41 = a42 = 0; a43 = (perspective) ? -1 / perspective : 0; zOrigin = t.zOrigin; min = 0.000001; //threshold below which browsers use scientific notation which won't work. comma = ","; zero = "0"; angle = rotationY * _DEG2RAD; if (angle) { cos = Math.cos(angle); sin = Math.sin(angle); a31 = -sin; a41 = a43*-sin; a13 = a11*sin; a23 = a21*sin; a33 = cos; a43 *= cos; a11 *= cos; a21 *= cos; } angle = rotationX * _DEG2RAD; if (angle) { cos = Math.cos(angle); sin = Math.sin(angle); t1 = a12*cos+a13*sin; t2 = a22*cos+a23*sin; a32 = a33*sin; a42 = a43*sin; a13 = a12*-sin+a13*cos; a23 = a22*-sin+a23*cos; a33 = a33*cos; a43 = a43*cos; a12 = t1; a22 = t2; } if (sz !== 1) { a13*=sz; a23*=sz; a33*=sz; a43*=sz; } if (sy !== 1) { a12*=sy; a22*=sy; a32*=sy; a42*=sy; } if (sx !== 1) { a11*=sx; a21*=sx; a31*=sx; a41*=sx; } if (zOrigin || isSVG) { if (zOrigin) { x += a13*-zOrigin; y += a23*-zOrigin; z += a33*-zOrigin+zOrigin; } if (isSVG) { //due to bugs in some browsers, we need to manage the transform-origin of SVG manually x += t.xOrigin - (t.xOrigin * a11 + t.yOrigin * a12) + t.xOffset; y += t.yOrigin - (t.xOrigin * a21 + t.yOrigin * a22) + t.yOffset; } if (x < min && x > -min) { x = zero; } if (y < min && y > -min) { y = zero; } if (z < min && z > -min) { z = 0; //don't use string because we calculate perspective later and need the number. } } //optimized way of concatenating all the values into a string. If we do it all in one shot, it's slower because of the way browsers have to create temp strings and the way it affects memory. If we do it piece-by-piece with +=, it's a bit slower too. We found that doing it in these sized chunks works best overall: transform = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix3d(" : "matrix3d("); transform += ((a11 < min && a11 > -min) ? zero : a11) + comma + ((a21 < min && a21 > -min) ? zero : a21) + comma + ((a31 < min && a31 > -min) ? zero : a31); transform += comma + ((a41 < min && a41 > -min) ? zero : a41) + comma + ((a12 < min && a12 > -min) ? zero : a12) + comma + ((a22 < min && a22 > -min) ? zero : a22); if (rotationX || rotationY || sz !== 1) { //performance optimization (often there's no rotationX or rotationY, so we can skip these calculations) transform += comma + ((a32 < min && a32 > -min) ? zero : a32) + comma + ((a42 < min && a42 > -min) ? zero : a42) + comma + ((a13 < min && a13 > -min) ? zero : a13); transform += comma + ((a23 < min && a23 > -min) ? zero : a23) + comma + ((a33 < min && a33 > -min) ? zero : a33) + comma + ((a43 < min && a43 > -min) ? zero : a43) + comma; } else { transform += ",0,0,0,0,1,0,"; } transform += x + comma + y + comma + z + comma + (perspective ? (1 + (-z / perspective)) : 1) + ")"; style[_transformProp] = transform; }; p = Transform.prototype; p.x = p.y = p.z = p.skewX = p.skewY = p.rotation = p.rotationX = p.rotationY = p.zOrigin = p.xPercent = p.yPercent = p.xOffset = p.yOffset = 0; p.scaleX = p.scaleY = p.scaleZ = 1; _registerComplexSpecialProp("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,svgOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType,xPercent,yPercent,smoothOrigin", {parser:function(t, e, parsingProp, cssp, pt, plugin, vars) { if (cssp._lastParsedTransform === vars) { return pt; } //only need to parse the transform once, and only if the browser supports it. cssp._lastParsedTransform = vars; var scaleFunc = (vars.scale && typeof(vars.scale) === "function") ? vars.scale : 0, //if there's a function-based "scale" value, swap in the resulting numeric value temporarily. Otherwise, if it's called for both scaleX and scaleY independently, they may not match (like if the function uses Math.random()). swapFunc; if (typeof(vars[parsingProp]) === "function") { //whatever property triggers the initial parsing might be a function-based value in which case it already got called in parse(), thus we don't want to call it again in here. The most efficient way to avoid this is to temporarily swap the value directly into the vars object, and then after we do all our parsing in this function, we'll swap it back again. swapFunc = vars[parsingProp]; vars[parsingProp] = e; } if (scaleFunc) { vars.scale = scaleFunc(_index, t); } var originalGSTransform = t._gsTransform, style = t.style, min = 0.000001, i = _transformProps.length, v = vars, endRotations = {}, transformOriginString = "transformOrigin", m1 = _getTransform(t, _cs, true, v.parseTransform), orig = v.transform && ((typeof(v.transform) === "function") ? v.transform(_index, _target) : v.transform), m2, copy, has3D, hasChange, dr, x, y, matrix, p; cssp._transform = m1; if (orig && typeof(orig) === "string" && _transformProp) { //for values like transform:"rotate(60deg) scale(0.5, 0.8)" copy = _tempDiv.style; //don't use the original target because it might be SVG in which case some browsers don't report computed style correctly. copy[_transformProp] = orig; copy.display = "block"; //if display is "none", the browser often refuses to report the transform properties correctly. copy.position = "absolute"; _doc.body.appendChild(_tempDiv); m2 = _getTransform(_tempDiv, null, false); if (m1.svg) { //if it's an SVG element, x/y part of the matrix will be affected by whatever we use as the origin and the offsets, so compensate here... x = m1.xOrigin; y = m1.yOrigin; m2.x -= m1.xOffset; m2.y -= m1.yOffset; if (v.transformOrigin || v.svgOrigin) { //if this tween is altering the origin, we must factor that in here. The actual work of recording the transformOrigin values and setting up the PropTween is done later (still inside this function) so we cannot leave the changes intact here - we only want to update the x/y accordingly. orig = {}; _parseSVGOrigin(t, _parsePosition(v.transformOrigin), orig, v.svgOrigin, v.smoothOrigin, true); x = orig.xOrigin; y = orig.yOrigin; m2.x -= orig.xOffset - m1.xOffset; m2.y -= orig.yOffset - m1.yOffset; } if (x || y) { matrix = _getMatrix(_tempDiv, true); m2.x -= x - (x * matrix[0] + y * matrix[2]); m2.y -= y - (x * matrix[1] + y * matrix[3]); } } _doc.body.removeChild(_tempDiv); if (!m2.perspective) { m2.perspective = m1.perspective; //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case. } if (v.xPercent != null) { m2.xPercent = _parseVal(v.xPercent, m1.xPercent); } if (v.yPercent != null) { m2.yPercent = _parseVal(v.yPercent, m1.yPercent); } } else if (typeof(v) === "object") { //for values like scaleX, scaleY, rotation, x, y, skewX, and skewY or transform:{...} (object) m2 = {scaleX:_parseVal((v.scaleX != null) ? v.scaleX : v.scale, m1.scaleX), scaleY:_parseVal((v.scaleY != null) ? v.scaleY : v.scale, m1.scaleY), scaleZ:_parseVal(v.scaleZ, m1.scaleZ), x:_parseVal(v.x, m1.x), y:_parseVal(v.y, m1.y), z:_parseVal(v.z, m1.z), xPercent:_parseVal(v.xPercent, m1.xPercent), yPercent:_parseVal(v.yPercent, m1.yPercent), perspective:_parseVal(v.transformPerspective, m1.perspective)}; dr = v.directionalRotation; if (dr != null) { if (typeof(dr) === "object") { for (copy in dr) { v[copy] = dr[copy]; } } else { v.rotation = dr; } } if (typeof(v.x) === "string" && v.x.indexOf("%") !== -1) { m2.x = 0; m2.xPercent = _parseVal(v.x, m1.xPercent); } if (typeof(v.y) === "string" && v.y.indexOf("%") !== -1) { m2.y = 0; m2.yPercent = _parseVal(v.y, m1.yPercent); } m2.rotation = _parseAngle(("rotation" in v) ? v.rotation : ("shortRotation" in v) ? v.shortRotation + "_short" : ("rotationZ" in v) ? v.rotationZ : m1.rotation, m1.rotation, "rotation", endRotations); if (_supports3D) { m2.rotationX = _parseAngle(("rotationX" in v) ? v.rotationX : ("shortRotationX" in v) ? v.shortRotationX + "_short" : m1.rotationX || 0, m1.rotationX, "rotationX", endRotations); m2.rotationY = _parseAngle(("rotationY" in v) ? v.rotationY : ("shortRotationY" in v) ? v.shortRotationY + "_short" : m1.rotationY || 0, m1.rotationY, "rotationY", endRotations); } m2.skewX = _parseAngle(v.skewX, m1.skewX); m2.skewY = _parseAngle(v.skewY, m1.skewY); } if (_supports3D && v.force3D != null) { m1.force3D = v.force3D; hasChange = true; } m1.skewType = v.skewType || m1.skewType || CSSPlugin.defaultSkewType; has3D = (m1.force3D || m1.z || m1.rotationX || m1.rotationY || m2.z || m2.rotationX || m2.rotationY || m2.perspective); if (!has3D && v.scale != null) { m2.scaleZ = 1; //no need to tween scaleZ. } while (--i > -1) { p = _transformProps[i]; orig = m2[p] - m1[p]; if (orig > min || orig < -min || v[p] != null || _forcePT[p] != null) { hasChange = true; pt = new CSSPropTween(m1, p, m1[p], orig, pt); if (p in endRotations) { pt.e = endRotations[p]; //directional rotations typically have compensated values during the tween, but we need to make sure they end at exactly what the user requested } pt.xs0 = 0; //ensures the value stays numeric in setRatio() pt.plugin = plugin; cssp._overwriteProps.push(pt.n); } } orig = v.transformOrigin; if (m1.svg && (orig || v.svgOrigin)) { x = m1.xOffset; //when we change the origin, in order to prevent things from jumping we adjust the x/y so we must record those here so that we can create PropTweens for them and flip them at the same time as the origin y = m1.yOffset; _parseSVGOrigin(t, _parsePosition(orig), m2, v.svgOrigin, v.smoothOrigin); pt = _addNonTweeningNumericPT(m1, "xOrigin", (originalGSTransform ? m1 : m2).xOrigin, m2.xOrigin, pt, transformOriginString); //note: if there wasn't a transformOrigin defined yet, just start with the destination one; it's wasteful otherwise, and it causes problems with fromTo() tweens. For example, TweenLite.to("#wheel", 3, {rotation:180, transformOrigin:"50% 50%", delay:1}); TweenLite.fromTo("#wheel", 3, {scale:0.5, transformOrigin:"50% 50%"}, {scale:1, delay:2}); would cause a jump when the from values revert at the beginning of the 2nd tween. pt = _addNonTweeningNumericPT(m1, "yOrigin", (originalGSTransform ? m1 : m2).yOrigin, m2.yOrigin, pt, transformOriginString); if (x !== m1.xOffset || y !== m1.yOffset) { pt = _addNonTweeningNumericPT(m1, "xOffset", (originalGSTransform ? x : m1.xOffset), m1.xOffset, pt, transformOriginString); pt = _addNonTweeningNumericPT(m1, "yOffset", (originalGSTransform ? y : m1.yOffset), m1.yOffset, pt, transformOriginString); } orig = "0px 0px"; //certain browsers (like firefox) completely botch transform-origin, so we must remove it to prevent it from contaminating transforms. We manage it ourselves with xOrigin and yOrigin } if (orig || (_supports3D && has3D && m1.zOrigin)) { //if anything 3D is happening and there's a transformOrigin with a z component that's non-zero, we must ensure that the transformOrigin's z-component is set to 0 so that we can manually do those calculations to get around Safari bugs. Even if the user didn't specifically define a "transformOrigin" in this particular tween (maybe they did it via css directly). if (_transformProp) { hasChange = true; p = _transformOriginProp; orig = (orig || _getStyle(t, p, _cs, false, "50% 50%")) + ""; //cast as string to avoid errors pt = new CSSPropTween(style, p, 0, 0, pt, -1, transformOriginString); pt.b = style[p]; pt.plugin = plugin; if (_supports3D) { copy = m1.zOrigin; orig = orig.split(" "); m1.zOrigin = ((orig.length > 2 && !(copy !== 0 && orig[2] === "0px")) ? parseFloat(orig[2]) : copy) || 0; //Safari doesn't handle the z part of transformOrigin correctly, so we'll manually handle it in the _set3DTransformRatio() method. pt.xs0 = pt.e = orig[0] + " " + (orig[1] || "50%") + " 0px"; //we must define a z value of 0px specifically otherwise iOS 5 Safari will stick with the old one (if one was defined)! pt = new CSSPropTween(m1, "zOrigin", 0, 0, pt, -1, pt.n); //we must create a CSSPropTween for the _gsTransform.zOrigin so that it gets reset properly at the beginning if the tween runs backward (as opposed to just setting m1.zOrigin here) pt.b = copy; pt.xs0 = pt.e = m1.zOrigin; } else { pt.xs0 = pt.e = orig; } //for older versions of IE (6-8), we need to manually calculate things inside the setRatio() function. We record origin x and y (ox and oy) and whether or not the values are percentages (oxp and oyp). } else { _parsePosition(orig + "", m1); } } if (hasChange) { cssp._transformType = (!(m1.svg && _useSVGTransformAttr) && (has3D || this._transformType === 3)) ? 3 : 2; //quicker than calling cssp._enableTransforms(); } if (swapFunc) { vars[parsingProp] = swapFunc; } if (scaleFunc) { vars.scale = scaleFunc; } return pt; }, prefix:true}); _registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"}); _registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) { e = this.format(e); var props = ["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"], style = t.style, ea1, i, es2, bs2, bs, es, bn, en, w, h, esfx, bsfx, rel, hn, vn, em; w = parseFloat(t.offsetWidth); h = parseFloat(t.offsetHeight); ea1 = e.split(" "); for (i = 0; i < props.length; i++) { //if we're dealing with percentages, we must convert things separately for the horizontal and vertical axis! if (this.p.indexOf("border")) { //older browsers used a prefix props[i] = _checkPropPrefix(props[i]); } bs = bs2 = _getStyle(t, props[i], _cs, false, "0px"); if (bs.indexOf(" ") !== -1) { bs2 = bs.split(" "); bs = bs2[0]; bs2 = bs2[1]; } es = es2 = ea1[i]; bn = parseFloat(bs); bsfx = bs.substr((bn + "").length); rel = (es.charAt(1) === "="); if (rel) { en = parseInt(es.charAt(0)+"1", 10); es = es.substr(2); en *= parseFloat(es); esfx = es.substr((en + "").length - (en < 0 ? 1 : 0)) || ""; } else { en = parseFloat(es); esfx = es.substr((en + "").length); } if (esfx === "") { esfx = _suffixMap[p] || bsfx; } if (esfx !== bsfx) { hn = _convertToPixels(t, "borderLeft", bn, bsfx); //horizontal number (we use a bogus "borderLeft" property just because the _convertToPixels() method searches for the keywords "Left", "Right", "Top", and "Bottom" to determine of it's a horizontal or vertical property, and we need "border" in the name so that it knows it should measure relative to the element itself, not its parent. vn = _convertToPixels(t, "borderTop", bn, bsfx); //vertical number if (esfx === "%") { bs = (hn / w * 100) + "%"; bs2 = (vn / h * 100) + "%"; } else if (esfx === "em") { em = _convertToPixels(t, "borderLeft", 1, "em"); bs = (hn / em) + "em"; bs2 = (vn / em) + "em"; } else { bs = hn + "px"; bs2 = vn + "px"; } if (rel) { es = (parseFloat(bs) + en) + esfx; es2 = (parseFloat(bs2) + en) + esfx; } } pt = _parseComplex(style, props[i], bs + " " + bs2, es + " " + es2, false, "0px", pt); } return pt; }, prefix:true, formatter:_getFormatter("0px 0px 0px 0px", false, true)}); _registerComplexSpecialProp("borderBottomLeftRadius,borderBottomRightRadius,borderTopLeftRadius,borderTopRightRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) { return _parseComplex(t.style, p, this.format(_getStyle(t, p, _cs, false, "0px 0px")), this.format(e), false, "0px", pt); }, prefix:true, formatter:_getFormatter("0px 0px", false, true)}); _registerComplexSpecialProp("backgroundPosition", {defaultValue:"0 0", parser:function(t, e, p, cssp, pt, plugin) { var bp = "background-position", cs = (_cs || _getComputedStyle(t, null)), bs = this.format( ((cs) ? _ieVers ? cs.getPropertyValue(bp + "-x") + " " + cs.getPropertyValue(bp + "-y") : cs.getPropertyValue(bp) : t.currentStyle.backgroundPositionX + " " + t.currentStyle.backgroundPositionY) || "0 0"), //Internet Explorer doesn't report background-position correctly - we must query background-position-x and background-position-y and combine them (even in IE10). Before IE9, we must do the same with the currentStyle object and use camelCase es = this.format(e), ba, ea, i, pct, overlap, src; if ((bs.indexOf("%") !== -1) !== (es.indexOf("%") !== -1) && es.split(",").length < 2) { src = _getStyle(t, "backgroundImage").replace(_urlExp, ""); if (src && src !== "none") { ba = bs.split(" "); ea = es.split(" "); _tempImg.setAttribute("src", src); //set the temp IMG's src to the background-image so that we can measure its width/height i = 2; while (--i > -1) { bs = ba[i]; pct = (bs.indexOf("%") !== -1); if (pct !== (ea[i].indexOf("%") !== -1)) { overlap = (i === 0) ? t.offsetWidth - _tempImg.width : t.offsetHeight - _tempImg.height; ba[i] = pct ? (parseFloat(bs) / 100 * overlap) + "px" : (parseFloat(bs) / overlap * 100) + "%"; } } bs = ba.join(" "); } } return this.parseComplex(t.style, bs, es, pt, plugin); }, formatter:_parsePosition}); _registerComplexSpecialProp("backgroundSize", {defaultValue:"0 0", formatter:function(v) { v += ""; //ensure it's a string return _parsePosition(v.indexOf(" ") === -1 ? v + " " + v : v); //if set to something like "100% 100%", Safari typically reports the computed style as just "100%" (no 2nd value), but we should ensure that there are two values, so copy the first one. Otherwise, it'd be interpreted as "100% 0" (wrong). }}); _registerComplexSpecialProp("perspective", {defaultValue:"0px", prefix:true}); _registerComplexSpecialProp("perspectiveOrigin", {defaultValue:"50% 50%", prefix:true}); _registerComplexSpecialProp("transformStyle", {prefix:true}); _registerComplexSpecialProp("backfaceVisibility", {prefix:true}); _registerComplexSpecialProp("userSelect", {prefix:true}); _registerComplexSpecialProp("margin", {parser:_getEdgeParser("marginTop,marginRight,marginBottom,marginLeft")}); _registerComplexSpecialProp("padding", {parser:_getEdgeParser("paddingTop,paddingRight,paddingBottom,paddingLeft")}); _registerComplexSpecialProp("clip", {defaultValue:"rect(0px,0px,0px,0px)", parser:function(t, e, p, cssp, pt, plugin){ var b, cs, delim; if (_ieVers < 9) { //IE8 and earlier don't report a "clip" value in the currentStyle - instead, the values are split apart into clipTop, clipRight, clipBottom, and clipLeft. Also, in IE7 and earlier, the values inside rect() are space-delimited, not comma-delimited. cs = t.currentStyle; delim = _ieVers < 8 ? " " : ","; b = "rect(" + cs.clipTop + delim + cs.clipRight + delim + cs.clipBottom + delim + cs.clipLeft + ")"; e = this.format(e).split(",").join(delim); } else { b = this.format(_getStyle(t, this.p, _cs, false, this.dflt)); e = this.format(e); } return this.parseComplex(t.style, b, e, pt, plugin); }}); _registerComplexSpecialProp("textShadow", {defaultValue:"0px 0px 0px #999", color:true, multi:true}); _registerComplexSpecialProp("autoRound,strictUnits", {parser:function(t, e, p, cssp, pt) {return pt;}}); //just so that we can ignore these properties (not tween them) _registerComplexSpecialProp("border", {defaultValue:"0px solid #000", parser:function(t, e, p, cssp, pt, plugin) { var bw = _getStyle(t, "borderTopWidth", _cs, false, "0px"), end = this.format(e).split(" "), esfx = end[0].replace(_suffixExp, ""); if (esfx !== "px") { //if we're animating to a non-px value, we need to convert the beginning width to that unit. bw = (parseFloat(bw) / _convertToPixels(t, "borderTopWidth", 1, esfx)) + esfx; } return this.parseComplex(t.style, this.format(bw + " " + _getStyle(t, "borderTopStyle", _cs, false, "solid") + " " + _getStyle(t, "borderTopColor", _cs, false, "#000")), end.join(" "), pt, plugin); }, color:true, formatter:function(v) { var a = v.split(" "); return a[0] + " " + (a[1] || "solid") + " " + (v.match(_colorExp) || ["#000"])[0]; }}); _registerComplexSpecialProp("borderWidth", {parser:_getEdgeParser("borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth")}); //Firefox doesn't pick up on borderWidth set in style sheets (only inline). _registerComplexSpecialProp("float,cssFloat,styleFloat", {parser:function(t, e, p, cssp, pt, plugin) { var s = t.style, prop = ("cssFloat" in s) ? "cssFloat" : "styleFloat"; return new CSSPropTween(s, prop, 0, 0, pt, -1, p, false, 0, s[prop], e); }}); //opacity-related var _setIEOpacityRatio = function(v) { var t = this.t, //refers to the element's style property filters = t.filter || _getStyle(this.data, "filter") || "", val = (this.s + this.c * v) | 0, skip; if (val === 100) { //for older versions of IE that need to use a filter to apply opacity, we should remove the filter if opacity hits 1 in order to improve performance, but make sure there isn't a transform (matrix) or gradient in the filters. if (filters.indexOf("atrix(") === -1 && filters.indexOf("radient(") === -1 && filters.indexOf("oader(") === -1) { t.removeAttribute("filter"); skip = (!_getStyle(this.data, "filter")); //if a class is applied that has an alpha filter, it will take effect (we don't want that), so re-apply our alpha filter in that case. We must first remove it and then check. } else { t.filter = filters.replace(_alphaFilterExp, ""); skip = true; } } if (!skip) { if (this.xn1) { t.filter = filters = filters || ("alpha(opacity=" + val + ")"); //works around bug in IE7/8 that prevents changes to "visibility" from being applied properly if the filter is changed to a different alpha on the same frame. } if (filters.indexOf("pacity") === -1) { //only used if browser doesn't support the standard opacity style property (IE 7 and 8). We omit the "O" to avoid case-sensitivity issues if (val !== 0 || !this.xn1) { //bugs in IE7/8 won't render the filter properly if opacity is ADDED on the same frame/render as "visibility" changes (this.xn1 is 1 if this tween is an "autoAlpha" tween) t.filter = filters + " alpha(opacity=" + val + ")"; //we round the value because otherwise, bugs in IE7/8 can prevent "visibility" changes from being applied properly. } } else { t.filter = filters.replace(_opacityExp, "opacity=" + val); } } }; _registerComplexSpecialProp("opacity,alpha,autoAlpha", {defaultValue:"1", parser:function(t, e, p, cssp, pt, plugin) { var b = parseFloat(_getStyle(t, "opacity", _cs, false, "1")), style = t.style, isAutoAlpha = (p === "autoAlpha"); if (typeof(e) === "string" && e.charAt(1) === "=") { e = ((e.charAt(0) === "-") ? -1 : 1) * parseFloat(e.substr(2)) + b; } if (isAutoAlpha && b === 1 && _getStyle(t, "visibility", _cs) === "hidden" && e !== 0) { //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience) b = 0; } if (_supportsOpacity) { pt = new CSSPropTween(style, "opacity", b, e - b, pt); } else { pt = new CSSPropTween(style, "opacity", b * 100, (e - b) * 100, pt); pt.xn1 = isAutoAlpha ? 1 : 0; //we need to record whether or not this is an autoAlpha so that in the setRatio(), we know to duplicate the setting of the alpha in order to work around a bug in IE7 and IE8 that prevents changes to "visibility" from taking effect if the filter is changed to a different alpha(opacity) at the same time. Setting it to the SAME value first, then the new value works around the IE7/8 bug. style.zoom = 1; //helps correct an IE issue. pt.type = 2; pt.b = "alpha(opacity=" + pt.s + ")"; pt.e = "alpha(opacity=" + (pt.s + pt.c) + ")"; pt.data = t; pt.plugin = plugin; pt.setRatio = _setIEOpacityRatio; } if (isAutoAlpha) { //we have to create the "visibility" PropTween after the opacity one in the linked list so that they run in the order that works properly in IE8 and earlier pt = new CSSPropTween(style, "visibility", 0, 0, pt, -1, null, false, 0, ((b !== 0) ? "inherit" : "hidden"), ((e === 0) ? "hidden" : "inherit")); pt.xs0 = "inherit"; cssp._overwriteProps.push(pt.n); cssp._overwriteProps.push(p); } return pt; }}); var _removeProp = function(s, p) { if (p) { if (s.removeProperty) { if (p.substr(0,2) === "ms" || p.substr(0,6) === "webkit") { //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example) p = "-" + p; } s.removeProperty(p.replace(_capsExp, "-$1").toLowerCase()); } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" s.removeAttribute(p); } } }, _setClassNameRatio = function(v) { this.t._gsClassPT = this; if (v === 1 || v === 0) { this.t.setAttribute("class", (v === 0) ? this.b : this.e); var mpt = this.data, //first MiniPropTween s = this.t.style; while (mpt) { if (!mpt.v) { _removeProp(s, mpt.p); } else { s[mpt.p] = mpt.v; } mpt = mpt._next; } if (v === 1 && this.t._gsClassPT === this) { this.t._gsClassPT = null; } } else if (this.t.getAttribute("class") !== this.e) { this.t.setAttribute("class", this.e); } }; _registerComplexSpecialProp("className", {parser:function(t, e, p, cssp, pt, plugin, vars) { var b = t.getAttribute("class") || "", //don't use t.className because it doesn't work consistently on SVG elements; getAttribute("class") and setAttribute("class", value") is more reliable. cssText = t.style.cssText, difData, bs, cnpt, cnptLookup, mpt; pt = cssp._classNamePT = new CSSPropTween(t, p, 0, 0, pt, 2); pt.setRatio = _setClassNameRatio; pt.pr = -11; _hasPriority = true; pt.b = b; bs = _getAllStyles(t, _cs); //if there's a className tween already operating on the target, force it to its end so that the necessary inline styles are removed and the class name is applied before we determine the end state (we don't want inline styles interfering that were there just for class-specific values) cnpt = t._gsClassPT; if (cnpt) { cnptLookup = {}; mpt = cnpt.data; //first MiniPropTween which stores the inline styles - we need to force these so that the inline styles don't contaminate things. Otherwise, there's a small chance that a tween could start and the inline values match the destination values and they never get cleaned. while (mpt) { cnptLookup[mpt.p] = 1; mpt = mpt._next; } cnpt.setRatio(1); } t._gsClassPT = pt; pt.e = (e.charAt(1) !== "=") ? e : b.replace(new RegExp("(?:\\s|^)" + e.substr(2) + "(?![\\w-])"), "") + ((e.charAt(0) === "+") ? " " + e.substr(2) : ""); t.setAttribute("class", pt.e); difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup); t.setAttribute("class", b); pt.data = difData.firstMPT; t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity). pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself) return pt; }}); var _setClearPropsRatio = function(v) { if (v === 1 || v === 0) if (this.data._totalTime === this.data._totalDuration && this.data.data !== "isFromStart") { //this.data refers to the tween. Only clear at the END of the tween (remember, from() tweens make the ratio go from 1 to 0, so we can't just check that and if the tween is the zero-duration one that's created internally to render the starting values in a from() tween, ignore that because otherwise, for example, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in). var s = this.t.style, transformParse = _specialProps.transform.parse, a, p, i, clearTransform, transform; if (this.e === "all") { s.cssText = ""; clearTransform = true; } else { a = this.e.split(" ").join("").split(","); i = a.length; while (--i > -1) { p = a[i]; if (_specialProps[p]) { if (_specialProps[p].parse === transformParse) { clearTransform = true; } else { p = (p === "transformOrigin") ? _transformOriginProp : _specialProps[p].p; //ensures that special properties use the proper browser-specific property name, like "scaleX" might be "-webkit-transform" or "boxShadow" might be "-moz-box-shadow" } } _removeProp(s, p); } } if (clearTransform) { _removeProp(s, _transformProp); transform = this.t._gsTransform; if (transform) { if (transform.svg) { this.t.removeAttribute("data-svg-origin"); this.t.removeAttribute("transform"); } delete this.t._gsTransform; } } } }; _registerComplexSpecialProp("clearProps", {parser:function(t, e, p, cssp, pt) { pt = new CSSPropTween(t, p, 0, 0, pt, 2); pt.setRatio = _setClearPropsRatio; pt.e = e; pt.pr = -10; pt.data = cssp._tween; _hasPriority = true; return pt; }}); p = "bezier,throwProps,physicsProps,physics2D".split(","); i = p.length; while (i--) { _registerPluginProp(p[i]); } p = CSSPlugin.prototype; p._firstPT = p._lastParsedTransform = p._transform = null; //gets called when the tween renders for the first time. This kicks everything off, recording start/end values, etc. p._onInitTween = function(target, vars, tween, index) { if (!target.nodeType) { //css is only for dom elements return false; } this._target = _target = target; this._tween = tween; this._vars = vars; _index = index; _autoRound = vars.autoRound; _hasPriority = false; _suffixMap = vars.suffixMap || CSSPlugin.suffixMap; _cs = _getComputedStyle(target, ""); _overwriteProps = this._overwriteProps; var style = target.style, v, pt, pt2, first, last, next, zIndex, tpt, threeD; if (_reqSafariFix) if (style.zIndex === "") { v = _getStyle(target, "zIndex", _cs); if (v === "auto" || v === "") { //corrects a bug in [non-Android] Safari that prevents it from repainting elements in their new positions if they don't have a zIndex set. We also can't just apply this inside _parseTransform() because anything that's moved in any way (like using "left" or "top" instead of transforms like "x" and "y") can be affected, so it is best to ensure that anything that's tweening has a z-index. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. Plus zIndex is less memory-intensive. this._addLazySet(style, "zIndex", 0); } } if (typeof(vars) === "string") { first = style.cssText; v = _getAllStyles(target, _cs); style.cssText = first + ";" + vars; v = _cssDif(target, v, _getAllStyles(target)).difs; if (!_supportsOpacity && _opacityValExp.test(vars)) { v.opacity = parseFloat( RegExp.$1 ); } vars = v; style.cssText = first; } if (vars.className) { //className tweens will combine any differences they find in the css with the vars that are passed in, so {className:"myClass", scale:0.5, left:20} would work. this._firstPT = pt = _specialProps.className.parse(target, vars.className, "className", this, null, null, vars); } else { this._firstPT = pt = this.parse(target, vars, null); } if (this._transformType) { threeD = (this._transformType === 3); if (!_transformProp) { style.zoom = 1; //helps correct an IE issue. } else if (_isSafari) { _reqSafariFix = true; //if zIndex isn't set, iOS Safari doesn't repaint things correctly sometimes (seemingly at random). if (style.zIndex === "") { zIndex = _getStyle(target, "zIndex", _cs); if (zIndex === "auto" || zIndex === "") { this._addLazySet(style, "zIndex", 0); } } //Setting WebkitBackfaceVisibility corrects 3 bugs: // 1) [non-Android] Safari skips rendering changes to "top" and "left" that are made on the same frame/render as a transform update. // 2) iOS Safari sometimes neglects to repaint elements in their new positions. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. // 3) Safari sometimes displayed odd artifacts when tweening the transform (or WebkitTransform) property, like ghosts of the edges of the element remained. Definitely a browser bug. //Note: we allow the user to override the auto-setting by defining WebkitBackfaceVisibility in the vars of the tween. if (_isSafariLT6) { this._addLazySet(style, "WebkitBackfaceVisibility", this._vars.WebkitBackfaceVisibility || (threeD ? "visible" : "hidden")); } } pt2 = pt; while (pt2 && pt2._next) { pt2 = pt2._next; } tpt = new CSSPropTween(target, "transform", 0, 0, null, 2); this._linkCSSP(tpt, null, pt2); tpt.setRatio = _transformProp ? _setTransformRatio : _setIETransformRatio; tpt.data = this._transform || _getTransform(target, _cs, true); tpt.tween = tween; tpt.pr = -1; //ensures that the transforms get applied after the components are updated. _overwriteProps.pop(); //we don't want to force the overwrite of all "transform" tweens of the target - we only care about individual transform properties like scaleX, rotation, etc. The CSSPropTween constructor automatically adds the property to _overwriteProps which is why we need to pop() here. } if (_hasPriority) { //reorders the linked list in order of pr (priority) while (pt) { next = pt._next; pt2 = first; while (pt2 && pt2.pr > pt.pr) { pt2 = pt2._next; } if ((pt._prev = pt2 ? pt2._prev : last)) { pt._prev._next = pt; } else { first = pt; } if ((pt._next = pt2)) { pt2._prev = pt; } else { last = pt; } pt = next; } this._firstPT = first; } return true; }; p.parse = function(target, vars, pt, plugin) { var style = target.style, p, sp, bn, en, bs, es, bsfx, esfx, isStr, rel; for (p in vars) { es = vars[p]; //ending value string if (typeof(es) === "function") { es = es(_index, _target); } sp = _specialProps[p]; //SpecialProp lookup. if (sp) { pt = sp.parse(target, es, p, this, pt, plugin, vars); } else { bs = _getStyle(target, p, _cs) + ""; isStr = (typeof(es) === "string"); if (p === "color" || p === "fill" || p === "stroke" || p.indexOf("Color") !== -1 || (isStr && _rgbhslExp.test(es))) { //Opera uses background: to define color sometimes in addition to backgroundColor: if (!isStr) { es = _parseColor(es); es = ((es.length > 3) ? "rgba(" : "rgb(") + es.join(",") + ")"; } pt = _parseComplex(style, p, bs, es, true, "transparent", pt, 0, plugin); } else if (isStr && _complexExp.test(es)) { pt = _parseComplex(style, p, bs, es, true, null, pt, 0, plugin); } else { bn = parseFloat(bs); bsfx = (bn || bn === 0) ? bs.substr((bn + "").length) : ""; //remember, bs could be non-numeric like "normal" for fontWeight, so we should default to a blank suffix in that case. if (bs === "" || bs === "auto") { if (p === "width" || p === "height") { bn = _getDimension(target, p, _cs); bsfx = "px"; } else if (p === "left" || p === "top") { bn = _calculateOffset(target, p, _cs); bsfx = "px"; } else { bn = (p !== "opacity") ? 0 : 1; bsfx = ""; } } rel = (isStr && es.charAt(1) === "="); if (rel) { en = parseInt(es.charAt(0) + "1", 10); es = es.substr(2); en *= parseFloat(es); esfx = es.replace(_suffixExp, ""); } else { en = parseFloat(es); esfx = isStr ? es.replace(_suffixExp, "") : ""; } if (esfx === "") { esfx = (p in _suffixMap) ? _suffixMap[p] : bsfx; //populate the end suffix, prioritizing the map, then if none is found, use the beginning suffix. } es = (en || en === 0) ? (rel ? en + bn : en) + esfx : vars[p]; //ensures that any += or -= prefixes are taken care of. Record the end value before normalizing the suffix because we always want to end the tween on exactly what they intended even if it doesn't match the beginning value's suffix. //if the beginning/ending suffixes don't match, normalize them... if (bsfx !== esfx) if (esfx !== "") if (en || en === 0) if (bn) { //note: if the beginning value (bn) is 0, we don't need to convert units! bn = _convertToPixels(target, p, bn, bsfx); if (esfx === "%") { bn /= _convertToPixels(target, p, 100, "%") / 100; if (vars.strictUnits !== true) { //some browsers report only "px" values instead of allowing "%" with getComputedStyle(), so we assume that if we're tweening to a %, we should start there too unless strictUnits:true is defined. This approach is particularly useful for responsive designs that use from() tweens. bs = bn + "%"; } } else if (esfx === "em" || esfx === "rem" || esfx === "vw" || esfx === "vh") { bn /= _convertToPixels(target, p, 1, esfx); //otherwise convert to pixels. } else if (esfx !== "px") { en = _convertToPixels(target, p, en, esfx); esfx = "px"; //we don't use bsfx after this, so we don't need to set it to px too. } if (rel) if (en || en === 0) { es = (en + bn) + esfx; //the changes we made affect relative calculations, so adjust the end value here. } } if (rel) { en += bn; } if ((bn || bn === 0) && (en || en === 0)) { //faster than isNaN(). Also, previously we required en !== bn but that doesn't really gain much performance and it prevents _parseToProxy() from working properly if beginning and ending values match but need to get tweened by an external plugin anyway. For example, a bezier tween where the target starts at left:0 and has these points: [{left:50},{left:0}] wouldn't work properly because when parsing the last point, it'd match the first (current) one and a non-tweening CSSPropTween would be recorded when we actually need a normal tween (type:0) so that things get updated during the tween properly. pt = new CSSPropTween(style, p, bn, en - bn, pt, 0, p, (_autoRound !== false && (esfx === "px" || p === "zIndex")), 0, bs, es); pt.xs0 = esfx; //DEBUG: _log("tween "+p+" from "+pt.b+" ("+bn+esfx+") to "+pt.e+" with suffix: "+pt.xs0); } else if (style[p] === undefined || !es && (es + "" === "NaN" || es == null)) { _log("invalid " + p + " tween value: " + vars[p]); } else { pt = new CSSPropTween(style, p, en || bn || 0, 0, pt, -1, p, false, 0, bs, es); pt.xs0 = (es === "none" && (p === "display" || p.indexOf("Style") !== -1)) ? bs : es; //intermediate value should typically be set immediately (end value) except for "display" or things like borderTopStyle, borderBottomStyle, etc. which should use the beginning value during the tween. //DEBUG: _log("non-tweening value "+p+": "+pt.xs0); } } } if (plugin) if (pt && !pt.plugin) { pt.plugin = plugin; } } return pt; }; //gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1. p.setRatio = function(v) { var pt = this._firstPT, min = 0.000001, val, str, i; //at the end of the tween, we set the values to exactly what we received in order to make sure non-tweening values (like "position" or "float" or whatever) are set and so that if the beginning/ending suffixes (units) didn't match and we normalized to px, the value that the user passed in is used here. We check to see if the tween is at its beginning in case it's a from() tween in which case the ratio will actually go from 1 to 0 over the course of the tween (backwards). if (v === 1 && (this._tween._time === this._tween._duration || this._tween._time === 0)) { while (pt) { if (pt.type !== 2) { if (pt.r && pt.type !== -1) { val = Math.round(pt.s + pt.c); if (!pt.type) { pt.t[pt.p] = val + pt.xs0; } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)" i = pt.l; str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = str; } } else { pt.t[pt.p] = pt.e; } } else { pt.setRatio(v); } pt = pt._next; } } else if (v || !(this._tween._time === this._tween._duration || this._tween._time === 0) || this._tween._rawPrevTime === -0.000001) { while (pt) { val = pt.c * v + pt.s; if (pt.r) { val = Math.round(val); } else if (val < min) if (val > -min) { val = 0; } if (!pt.type) { pt.t[pt.p] = val + pt.xs0; } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)" i = pt.l; if (i === 2) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2; } else if (i === 3) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3; } else if (i === 4) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4; } else if (i === 5) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4 + pt.xn4 + pt.xs5; } else { str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = str; } } else if (pt.type === -1) { //non-tweening value pt.t[pt.p] = pt.xs0; } else if (pt.setRatio) { //custom setRatio() for things like SpecialProps, external plugins, etc. pt.setRatio(v); } pt = pt._next; } //if the tween is reversed all the way back to the beginning, we need to restore the original values which may have different units (like % instead of px or em or whatever). } else { while (pt) { if (pt.type !== 2) { pt.t[pt.p] = pt.b; } else { pt.setRatio(v); } pt = pt._next; } } }; /** * @private * Forces rendering of the target's transforms (rotation, scale, etc.) whenever the CSSPlugin's setRatio() is called. * Basically, this tells the CSSPlugin to create a CSSPropTween (type 2) after instantiation that runs last in the linked * list and calls the appropriate (3D or 2D) rendering function. We separate this into its own method so that we can call * it from other plugins like BezierPlugin if, for example, it needs to apply an autoRotation and this CSSPlugin * doesn't have any transform-related properties of its own. You can call this method as many times as you * want and it won't create duplicate CSSPropTweens. * * @param {boolean} threeD if true, it should apply 3D tweens (otherwise, just 2D ones are fine and typically faster) */ p._enableTransforms = function(threeD) { this._transform = this._transform || _getTransform(this._target, _cs, true); //ensures that the element has a _gsTransform property with the appropriate values. this._transformType = (!(this._transform.svg && _useSVGTransformAttr) && (threeD || this._transformType === 3)) ? 3 : 2; }; var lazySet = function(v) { this.t[this.p] = this.e; this.data._linkCSSP(this, this._next, null, true); //we purposefully keep this._next even though it'd make sense to null it, but this is a performance optimization, as this happens during the while (pt) {} loop in setRatio() at the bottom of which it sets pt = pt._next, so if we null it, the linked list will be broken in that loop. }; /** @private Gives us a way to set a value on the first render (and only the first render). **/ p._addLazySet = function(t, p, v) { var pt = this._firstPT = new CSSPropTween(t, p, 0, 0, this._firstPT, 2); pt.e = v; pt.setRatio = lazySet; pt.data = this; }; /** @private **/ p._linkCSSP = function(pt, next, prev, remove) { if (pt) { if (next) { next._prev = pt; } if (pt._next) { pt._next._prev = pt._prev; } if (pt._prev) { pt._prev._next = pt._next; } else if (this._firstPT === pt) { this._firstPT = pt._next; remove = true; //just to prevent resetting this._firstPT 5 lines down in case pt._next is null. (optimized for speed) } if (prev) { prev._next = pt; } else if (!remove && this._firstPT === null) { this._firstPT = pt; } pt._next = next; pt._prev = prev; } return pt; }; p._mod = function(lookup) { var pt = this._firstPT; while (pt) { if (typeof(lookup[pt.p]) === "function" && lookup[pt.p] === Math.round) { //only gets called by RoundPropsPlugin (ModifyPlugin manages all the rendering internally for CSSPlugin properties that need modification). Remember, we handle rounding a bit differently in this plugin for performance reasons, leveraging "r" as an indicator that the value should be rounded internally.. pt.r = 1; } pt = pt._next; } }; //we need to make sure that if alpha or autoAlpha is killed, opacity is too. And autoAlpha affects the "visibility" property. p._kill = function(lookup) { var copy = lookup, pt, p, xfirst; if (lookup.autoAlpha || lookup.alpha) { copy = {}; for (p in lookup) { //copy the lookup so that we're not changing the original which may be passed elsewhere. copy[p] = lookup[p]; } copy.opacity = 1; if (copy.autoAlpha) { copy.visibility = 1; } } if (lookup.className && (pt = this._classNamePT)) { //for className tweens, we need to kill any associated CSSPropTweens too; a linked list starts at the className's "xfirst". xfirst = pt.xfirst; if (xfirst && xfirst._prev) { this._linkCSSP(xfirst._prev, pt._next, xfirst._prev._prev); //break off the prev } else if (xfirst === this._firstPT) { this._firstPT = pt._next; } if (pt._next) { this._linkCSSP(pt._next, pt._next._next, xfirst._prev); } this._classNamePT = null; } pt = this._firstPT; while (pt) { if (pt.plugin && pt.plugin !== p && pt.plugin._kill) { //for plugins that are registered with CSSPlugin, we should notify them of the kill. pt.plugin._kill(lookup); p = pt.plugin; } pt = pt._next; } return TweenPlugin.prototype._kill.call(this, copy); }; //used by cascadeTo() for gathering all the style properties of each child element into an array for comparison. var _getChildStyles = function(e, props, targets) { var children, i, child, type; if (e.slice) { i = e.length; while (--i > -1) { _getChildStyles(e[i], props, targets); } return; } children = e.childNodes; i = children.length; while (--i > -1) { child = children[i]; type = child.type; if (child.style) { props.push(_getAllStyles(child)); if (targets) { targets.push(child); } } if ((type === 1 || type === 9 || type === 11) && child.childNodes.length) { _getChildStyles(child, props, targets); } } }; /** * Typically only useful for className tweens that may affect child elements, this method creates a TweenLite * and then compares the style properties of all the target's child elements at the tween's start and end, and * if any are different, it also creates tweens for those and returns an array containing ALL of the resulting * tweens (so that you can easily add() them to a TimelineLite, for example). The reason this functionality is * wrapped into a separate static method of CSSPlugin instead of being integrated into all regular className tweens * is because it creates entirely new tweens that may have completely different targets than the original tween, * so if they were all lumped into the original tween instance, it would be inconsistent with the rest of the API * and it would create other problems. For example: * - If I create a tween of elementA, that tween instance may suddenly change its target to include 50 other elements (unintuitive if I specifically defined the target I wanted) * - We can't just create new independent tweens because otherwise, what happens if the original/parent tween is reversed or pause or dropped into a TimelineLite for tight control? You'd expect that tween's behavior to affect all the others. * - Analyzing every style property of every child before and after the tween is an expensive operation when there are many children, so this behavior shouldn't be imposed on all className tweens by default, especially since it's probably rare that this extra functionality is needed. * * @param {Object} target object to be tweened * @param {number} Duration in seconds (or frames for frames-based tweens) * @param {Object} Object containing the end values, like {className:"newClass", ease:Linear.easeNone} * @return {Array} An array of TweenLite instances */ CSSPlugin.cascadeTo = function(target, duration, vars) { var tween = TweenLite.to(target, duration, vars), results = [tween], b = [], e = [], targets = [], _reservedProps = TweenLite._internals.reservedProps, i, difs, p, from; target = tween._targets || tween.target; _getChildStyles(target, b, targets); tween.render(duration, true, true); _getChildStyles(target, e); tween.render(0, true, true); tween._enabled(true); i = targets.length; while (--i > -1) { difs = _cssDif(targets[i], b[i], e[i]); if (difs.firstMPT) { difs = difs.difs; for (p in vars) { if (_reservedProps[p]) { difs[p] = vars[p]; } } from = {}; for (p in difs) { from[p] = b[i][p]; } results.push(TweenLite.fromTo(targets[i], duration, from, difs)); } } return results; }; TweenPlugin.activate([CSSPlugin]); return CSSPlugin; }, true); /* * ---------------------------------------------------------------- * RoundPropsPlugin * ---------------------------------------------------------------- */ (function() { var RoundPropsPlugin = _gsScope._gsDefine.plugin({ propName: "roundProps", version: "1.6.0", priority: -1, API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { this._tween = tween; return true; } }), _roundLinkedList = function(node) { while (node) { if (!node.f && !node.blob) { node.m = Math.round; } node = node._next; } }, p = RoundPropsPlugin.prototype; p._onInitAllProps = function() { var tween = this._tween, rp = (tween.vars.roundProps.join) ? tween.vars.roundProps : tween.vars.roundProps.split(","), i = rp.length, lookup = {}, rpt = tween._propLookup.roundProps, prop, pt, next; while (--i > -1) { lookup[rp[i]] = Math.round; } i = rp.length; while (--i > -1) { prop = rp[i]; pt = tween._firstPT; while (pt) { next = pt._next; //record here, because it may get removed if (pt.pg) { pt.t._mod(lookup); } else if (pt.n === prop) { if (pt.f === 2 && pt.t) { //a blob (text containing multiple numeric values) _roundLinkedList(pt.t._firstPT); } else { this._add(pt.t, prop, pt.s, pt.c); //remove from linked list if (next) { next._prev = pt._prev; } if (pt._prev) { pt._prev._next = next; } else if (tween._firstPT === pt) { tween._firstPT = next; } pt._next = pt._prev = null; tween._propLookup[prop] = rpt; } } pt = next; } } return false; }; p._add = function(target, p, s, c) { this._addTween(target, p, s, s + c, p, Math.round); this._overwriteProps.push(p); }; }()); /* * ---------------------------------------------------------------- * AttrPlugin * ---------------------------------------------------------------- */ (function() { _gsScope._gsDefine.plugin({ propName: "attr", API: 2, version: "0.6.0", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var p, end; if (typeof(target.setAttribute) !== "function") { return false; } for (p in value) { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } this._addTween(target, "setAttribute", target.getAttribute(p) + "", end + "", p, false, p); this._overwriteProps.push(p); } return true; } }); }()); /* * ---------------------------------------------------------------- * DirectionalRotationPlugin * ---------------------------------------------------------------- */ _gsScope._gsDefine.plugin({ propName: "directionalRotation", version: "0.3.0", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { if (typeof(value) !== "object") { value = {rotation:value}; } this.finals = {}; var cap = (value.useRadians === true) ? Math.PI * 2 : 360, min = 0.000001, p, v, start, end, dif, split; for (p in value) { if (p !== "useRadians") { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } split = (end + "").split("_"); v = split[0]; start = parseFloat( (typeof(target[p]) !== "function") ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]() ); end = this.finals[p] = (typeof(v) === "string" && v.charAt(1) === "=") ? start + parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : Number(v) || 0; dif = end - start; if (split.length) { v = split.join("_"); if (v.indexOf("short") !== -1) { dif = dif % cap; if (dif !== dif % (cap / 2)) { dif = (dif < 0) ? dif + cap : dif - cap; } } if (v.indexOf("_cw") !== -1 && dif < 0) { dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } else if (v.indexOf("ccw") !== -1 && dif > 0) { dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } } if (dif > min || dif < -min) { this._addTween(target, p, start, start + dif, p); this._overwriteProps.push(p); } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(ratio) { var pt; if (ratio !== 1) { this._super.setRatio.call(this, ratio); } else { pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](this.finals[pt.p]); } else { pt.t[pt.p] = this.finals[pt.p]; } pt = pt._next; } } } })._autoCSS = true; /* * ---------------------------------------------------------------- * EasePack * ---------------------------------------------------------------- */ _gsScope._gsDefine("easing.Back", ["easing.Ease"], function(Ease) { var w = (_gsScope.GreenSockGlobals || _gsScope), gs = w.com.greensock, _2PI = Math.PI * 2, _HALF_PI = Math.PI / 2, _class = gs._class, _create = function(n, f) { var C = _class("easing." + n, function(){}, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; return C; }, _easeReg = Ease.register || function(){}, //put an empty function in place just as a safety measure in case someone loads an OLD version of TweenLite.js where Ease.register doesn't exist. _wrap = function(name, EaseOut, EaseIn, EaseInOut, aliases) { var C = _class("easing."+name, { easeOut:new EaseOut(), easeIn:new EaseIn(), easeInOut:new EaseInOut() }, true); _easeReg(C, name); return C; }, EasePoint = function(time, value, next) { this.t = time; this.v = value; if (next) { this.next = next; next.prev = this; this.c = next.v - value; this.gap = next.t - time; } }, //Back _createBack = function(n, f) { var C = _class("easing." + n, function(overshoot) { this._p1 = (overshoot || overshoot === 0) ? overshoot : 1.70158; this._p2 = this._p1 * 1.525; }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(overshoot) { return new C(overshoot); }; return C; }, Back = _wrap("Back", _createBack("BackOut", function(p) { return ((p = p - 1) * p * ((this._p1 + 1) * p + this._p1) + 1); }), _createBack("BackIn", function(p) { return p * p * ((this._p1 + 1) * p - this._p1); }), _createBack("BackInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * p * p * ((this._p2 + 1) * p - this._p2) : 0.5 * ((p -= 2) * p * ((this._p2 + 1) * p + this._p2) + 2); }) ), //SlowMo SlowMo = _class("easing.SlowMo", function(linearRatio, power, yoyoMode) { power = (power || power === 0) ? power : 0.7; if (linearRatio == null) { linearRatio = 0.7; } else Iif (linearRatio > 1) { linearRatio = 1; } this._p = (linearRatio !== 1) ? power : 0; this._p1 = (1 - linearRatio) / 2; this._p2 = linearRatio; this._p3 = this._p1 + this._p2; this._calcEnd = (yoyoMode === true); }, true), p = SlowMo.prototype = new Ease(), SteppedEase, RoughEase, _createElastic; p.constructor = SlowMo; p.getRatio = function(p) { var r = p + (0.5 - p) * this._p; if (p < this._p1) { return this._calcEnd ? 1 - ((p = 1 - (p / this._p1)) * p) : r - ((p = 1 - (p / this._p1)) * p * p * p * r); } else if (p > this._p3) { return this._calcEnd ? 1 - (p = (p - this._p3) / this._p1) * p : r + ((p - r) * (p = (p - this._p3) / this._p1) * p * p * p); } return this._calcEnd ? 1 : r; }; SlowMo.ease = new SlowMo(0.7, 0.7); p.config = SlowMo.config = function(linearRatio, power, yoyoMode) { return new SlowMo(linearRatio, power, yoyoMode); }; //SteppedEase SteppedEase = _class("easing.SteppedEase", function(steps) { steps = steps || 1; this._p1 = 1 / steps; this._p2 = steps + 1; }, true); p = SteppedEase.prototype = new Ease(); p.constructor = SteppedEase; p.getRatio = function(p) { if (p < 0) { p = 0; } else if (p >= 1) { p = 0.999999999; } return ((this._p2 * p) >> 0) * this._p1; }; p.config = SteppedEase.config = function(steps) { return new SteppedEase(steps); }; //RoughEase RoughEase = _class("easing.RoughEase", function(vars) { vars = vars || {}; var taper = vars.taper || "none", a = [], cnt = 0, points = (vars.points || 20) | 0, i = points, randomize = (vars.randomize !== false), clamp = (vars.clamp === true), template = (vars.template instanceof Ease) ? vars.template : null, strength = (typeof(vars.strength) === "number") ? vars.strength * 0.4 : 0.4, x, y, bump, invX, obj, pnt; while (--i > -1) { x = randomize ? Math.random() : (1 / points) * i; y = template ? template.getRatio(x) : x; Eif (taper === "none") { bump = strength; } else if (taper === "out") { invX = 1 - x; bump = invX * invX * strength; } else if (taper === "in") { bump = x * x * strength; } else if (x < 0.5) { //"both" (start) invX = x * 2; bump = invX * invX * 0.5 * strength; } else { //"both" (end) invX = (1 - x) * 2; bump = invX * invX * 0.5 * strength; } Eif (randomize) { y += (Math.random() * bump) - (bump * 0.5); } else if (i % 2) { y += bump * 0.5; } else { y -= bump * 0.5; } Iif (clamp) { if (y > 1) { y = 1; } else if (y < 0) { y = 0; } } a[cnt++] = {x:x, y:y}; } a.sort(function(a, b) { return a.x - b.x; }); pnt = new EasePoint(1, 1, null); i = points; while (--i > -1) { obj = a[i]; pnt = new EasePoint(obj.x, obj.y, pnt); } this._prev = new EasePoint(0, 0, (pnt.t !== 0) ? pnt : pnt.next); }, true); p = RoughEase.prototype = new Ease(); p.constructor = RoughEase; p.getRatio = function(p) { var pnt = this._prev; if (p > pnt.t) { while (pnt.next && p >= pnt.t) { pnt = pnt.next; } pnt = pnt.prev; } else { while (pnt.prev && p <= pnt.t) { pnt = pnt.prev; } } this._prev = pnt; return (pnt.v + ((p - pnt.t) / pnt.gap) * pnt.c); }; p.config = function(vars) { return new RoughEase(vars); }; RoughEase.ease = new RoughEase(); //Bounce _wrap("Bounce", _create("BounceOut", function(p) { if (p < 1 / 2.75) { return 7.5625 * p * p; } else if (p < 2 / 2.75) { return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; }), _create("BounceIn", function(p) { if ((p = 1 - p) < 1 / 2.75) { return 1 - (7.5625 * p * p); } else if (p < 2 / 2.75) { return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75); } else if (p < 2.5 / 2.75) { return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375); } return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375); }), _create("BounceInOut", function(p) { var invert = (p < 0.5); if (invert) { p = 1 - (p * 2); } else { p = (p * 2) - 1; } if (p < 1 / 2.75) { p = 7.5625 * p * p; } else if (p < 2 / 2.75) { p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } else { p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; } return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5; }) ); //CIRC _wrap("Circ", _create("CircOut", function(p) { return Math.sqrt(1 - (p = p - 1) * p); }), _create("CircIn", function(p) { return -(Math.sqrt(1 - (p * p)) - 1); }), _create("CircInOut", function(p) { return ((p*=2) < 1) ? -0.5 * (Math.sqrt(1 - p * p) - 1) : 0.5 * (Math.sqrt(1 - (p -= 2) * p) + 1); }) ); //Elastic _createElastic = function(n, f, def) { var C = _class("easing." + n, function(amplitude, period) { this._p1 = (amplitude >= 1) ? amplitude : 1; //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1. this._p2 = (period || def) / (amplitude < 1 ? amplitude : 1); this._p3 = this._p2 / _2PI * (Math.asin(1 / this._p1) || 0); this._p2 = _2PI / this._p2; //precalculate to optimize }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(amplitude, period) { return new C(amplitude, period); }; return C; }; _wrap("Elastic", _createElastic("ElasticOut", function(p) { return this._p1 * Math.pow(2, -10 * p) * Math.sin( (p - this._p3) * this._p2 ) + 1; }, 0.3), _createElastic("ElasticIn", function(p) { return -(this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2 )); }, 0.3), _createElastic("ElasticInOut", function(p) { return ((p *= 2) < 1) ? -0.5 * (this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2)) : this._p1 * Math.pow(2, -10 *(p -= 1)) * Math.sin( (p - this._p3) * this._p2 ) * 0.5 + 1; }, 0.45) ); //Expo _wrap("Expo", _create("ExpoOut", function(p) { return 1 - Math.pow(2, -10 * p); }), _create("ExpoIn", function(p) { return Math.pow(2, 10 * (p - 1)) - 0.001; }), _create("ExpoInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); }) ); //Sine _wrap("Sine", _create("SineOut", function(p) { return Math.sin(p * _HALF_PI); }), _create("SineIn", function(p) { return -Math.cos(p * _HALF_PI) + 1; }), _create("SineInOut", function(p) { return -0.5 * (Math.cos(Math.PI * p) - 1); }) ); _class("easing.EaseLookup", { find:function(s) { return Ease.map[s]; } }, true); //register the non-standard eases _easeReg(w.SlowMo, "SlowMo", "ease,"); _easeReg(RoughEase, "RoughEase", "ease,"); _easeReg(SteppedEase, "SteppedEase", "ease,"); return Back; }, true); }); Iif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case TweenLite was already loaded separately. /* * ---------------------------------------------------------------- * Base classes like TweenLite, SimpleTimeline, Ease, Ticker, etc. * ---------------------------------------------------------------- */ (function(window, moduleName) { "use strict"; var _exports = {}, _doc = window.document, _globals = window.GreenSockGlobals = window.GreenSockGlobals || window; Iif (_globals.TweenLite) { return; //in case the core set of classes is already loaded, don't instantiate twice. } var _namespace = function(ns) { var a = ns.split("."), p = _globals, i; for (i = 0; i < a.length; i++) { p[a[i]] = p = p[a[i]] || {}; } return p; }, gs = _namespace("com.greensock"), _tinyNum = 0.0000000001, _slice = function(a) { //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])) {} return b; }, _emptyFunc = function() {}, _isArray = (function() { //works around issues in iframe environments where the Array global isn't shared, thus if the object originates in a different window/iframe, "(obj instanceof Array)" will evaluate false. We added some speed optimizations to avoid Object.prototype.toString.call() unless it's absolutely necessary because it's VERY slow (like 20x slower) var toString = Object.prototype.toString, array = toString.call([]); return function(obj) { return obj != null && (obj instanceof Array || (typeof(obj) === "object" && !!obj.push && toString.call(obj) === array)); }; }()), a, i, p, _ticker, _tickerActive, _defLookup = {}, /** * @constructor * Defines a GreenSock class, optionally with an array of dependencies that must be instantiated first and passed into the definition. * This allows users to load GreenSock JS files in any order even if they have interdependencies (like CSSPlugin extends TweenPlugin which is * inside TweenLite.js, but if CSSPlugin is loaded first, it should wait to run its code until TweenLite.js loads and instantiates TweenPlugin * and then pass TweenPlugin to CSSPlugin's definition). This is all done automatically and internally. * * Every definition will be added to a "com.greensock" global object (typically window, but if a window.GreenSockGlobals object is found, * it will go there as of v1.7). For example, TweenLite will be found at window.com.greensock.TweenLite and since it's a global class that should be available anywhere, * it is ALSO referenced at window.TweenLite. However some classes aren't considered global, like the base com.greensock.core.Animation class, so * those will only be at the package like window.com.greensock.core.Animation. Again, if you define a GreenSockGlobals object on the window, everything * gets tucked neatly inside there instead of on the window directly. This allows you to do advanced things like load multiple versions of GreenSock * files and put them into distinct objects (imagine a banner ad uses a newer version but the main site uses an older one). In that case, you could * sandbox the banner one like: * * <script> * var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever. * </script> * <script src="js/greensock/v1.7/TweenMax.js"></script> * <script> * window.GreenSockGlobals = window._gsQueue = window._gsDefine = null; //reset it back to null (along with the special _gsQueue variable) so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...) * </script> * <script src="js/greensock/v1.6/TweenMax.js"></script> * <script> * gs.TweenLite.to(...); //would use v1.7 * TweenLite.to(...); //would use v1.6 * </script> * * @param {!string} ns The namespace of the class definition, leaving off "com.greensock." as that's assumed. For example, "TweenLite" or "plugins.CSSPlugin" or "easing.Back". * @param {!Array.<string>} dependencies An array of dependencies (described as their namespaces minus "com.greensock." prefix). For example ["TweenLite","plugins.TweenPlugin","core.Animation"] * @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition. * @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object) */ Definition = function(ns, dependencies, func, global) { this.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses _defLookup[ns] = this; this.gsClass = null; this.func = func; var _classes = []; this.check = function(init) { var i = dependencies.length, missing = i, cur, a, n, cl, hasModule; while (--i > -1) { Eif ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) { _classes[i] = cur.gsClass; missing--; } else if (init) { cur.sc.push(this); } } Eif (missing === 0 && func) { a = ("com.greensock." + ns).split("."); n = a.pop(); cl = _namespace(a.join("."))[n] = this.gsClass = func.apply(func, _classes); //exports to multiple environments if (global) { _globals[n] = _exports[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.) hasModule = (typeof(module) !== "undefined" && module.exports); Iif (!hasModule && typeof(define) === "function" && define.amd){ //AMD define((window.GreenSockAMDPath ? window.GreenSockAMDPath + "/" : "") + ns.split(".").pop(), [], function() { return cl; }); } else Eif (hasModule){ //node if (ns === moduleName) { module.exports = _exports[moduleName] = cl; for (i in _exports) { cl[i] = _exports[i]; } } else if (_exports[moduleName]) { _exports[moduleName][n] = cl; } } } for (i = 0; i < this.sc.length; i++) { this.sc[i].check(); } } }; this.check(true); }, //used to create Definition instances (which basically registers a class that has dependencies). _gsDefine = window._gsDefine = function(ns, dependencies, func, global) { return new Definition(ns, dependencies, func, global); }, //a quick way to create a class that doesn't have any dependencies. Returns the class, but first registers it in the GreenSock namespace so that other classes can grab it (other classes might be dependent on the class). _class = gs._class = function(ns, func, global) { func = func || function() {}; _gsDefine(ns, [], function(){ return func; }, global); return func; }; _gsDefine.globals = _globals; /* * ---------------------------------------------------------------- * Ease * ---------------------------------------------------------------- */ var _baseParams = [0, 0, 1, 1], _blankArray = [], Ease = _class("easing.Ease", function(func, extraParams, type, power) { this._func = func; this._type = type || 0; this._power = power || 0; this._params = extraParams ? _baseParams.concat(extraParams) : _baseParams; }, true), _easeMap = Ease.map = {}, _easeReg = Ease.register = function(ease, names, types, create) { var na = names.split(","), i = na.length, ta = (types || "easeIn,easeOut,easeInOut").split(","), e, name, j, type; while (--i > -1) { name = na[i]; e = create ? _class("easing."+name, null, true) : gs.easing[name] || {}; j = ta.length; while (--j > -1) { type = ta[j]; _easeMap[name + "." + type] = _easeMap[type + name] = e[type] = ease.getRatio ? ease : ease[type] || new ease(); } } }; p = Ease.prototype; p._calcEnd = false; p.getRatio = function(p) { if (this._func) { this._params[0] = p; return this._func.apply(null, this._params); } var t = this._type, pw = this._power, r = (t === 1) ? 1 - p : (t === 2) ? p : (p < 0.5) ? p * 2 : (1 - p) * 2; if (pw === 1) { r *= r; } else if (pw === 2) { r *= r * r; } else if (pw === 3) { r *= r * r * r; } else if (pw === 4) { r *= r * r * r * r; } return (t === 1) ? 1 - r : (t === 2) ? r : (p < 0.5) ? r / 2 : 1 - (r / 2); }; //create all the standard eases like Linear, Quad, Cubic, Quart, Quint, Strong, Power0, Power1, Power2, Power3, and Power4 (each with easeIn, easeOut, and easeInOut) a = ["Linear","Quad","Cubic","Quart","Quint,Strong"]; i = a.length; while (--i > -1) { p = a[i]+",Power"+i; _easeReg(new Ease(null,null,1,i), p, "easeOut", true); _easeReg(new Ease(null,null,2,i), p, "easeIn" + ((i === 0) ? ",easeNone" : "")); _easeReg(new Ease(null,null,3,i), p, "easeInOut"); } _easeMap.linear = gs.easing.Linear.easeIn; _easeMap.swing = gs.easing.Quad.easeInOut; //for jQuery folks /* * ---------------------------------------------------------------- * EventDispatcher * ---------------------------------------------------------------- */ var EventDispatcher = _class("events.EventDispatcher", function(target) { this._listeners = {}; this._eventTarget = target || this; }); p = EventDispatcher.prototype; p.addEventListener = function(type, callback, scope, useParam, priority) { priority = priority || 0; var list = this._listeners[type], index = 0, listener, i; Iif (this === _ticker && !_tickerActive) { _ticker.wake(); } Eif (list == null) { this._listeners[type] = list = []; } i = list.length; while (--i > -1) { listener = list[i]; if (listener.c === callback && listener.s === scope) { list.splice(i, 1); } else if (index === 0 && listener.pr < priority) { index = i + 1; } } list.splice(index, 0, {c:callback, s:scope, up:useParam, pr:priority}); }; p.removeEventListener = function(type, callback) { var list = this._listeners[type], i; if (list) { i = list.length; while (--i > -1) { if (list[i].c === callback) { list.splice(i, 1); return; } } } }; p.dispatchEvent = function(type) { var list = this._listeners[type], i, t, listener; if (list) { i = list.length; Iif (i > 1) { list = list.slice(0); //in case addEventListener() is called from within a listener/callback (otherwise the index could change, resulting in a skip) } t = this._eventTarget; while (--i > -1) { listener = list[i]; Eif (listener) { Iif (listener.up) { listener.c.call(listener.s || t, {type:type, target:t}); } else { listener.c.call(listener.s || t); } } } } }; /* * ---------------------------------------------------------------- * Ticker * ---------------------------------------------------------------- */ var _reqAnimFrame = window.requestAnimationFrame, _cancelAnimFrame = window.cancelAnimationFrame, _getTime = Date.now || function() {return new Date().getTime();}, _lastUpdate = _getTime(); //now try to determine the requestAnimationFrame and cancelAnimationFrame functions and if none are found, we'll use a setTimeout()/clearTimeout() polyfill. a = ["ms","moz","webkit","o"]; i = a.length; while (--i > -1 && !_reqAnimFrame) { _reqAnimFrame = window[a[i] + "RequestAnimationFrame"]; _cancelAnimFrame = window[a[i] + "CancelAnimationFrame"] || window[a[i] + "CancelRequestAnimationFrame"]; } _class("Ticker", function(fps, useRAF) { var _self = this, _startTime = _getTime(), _useRAF = (useRAF !== false && _reqAnimFrame) ? "auto" : false, _lagThreshold = 500, _adjustedLag = 33, _tickWord = "tick", //helps reduce gc burden _fps, _req, _id, _gap, _nextTime, _tick = function(manual) { var elapsed = _getTime() - _lastUpdate, overlap, dispatch; if (elapsed > _lagThreshold) { _startTime += elapsed - _adjustedLag; } _lastUpdate += elapsed; _self.time = (_lastUpdate - _startTime) / 1000; overlap = _self.time - _nextTime; Eif (!_fps || overlap > 0 || manual === true) { _self.frame++; _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap); dispatch = true; } Eif (manual !== true) { //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise. _id = _req(_tick); } Eif (dispatch) { _self.dispatchEvent(_tickWord); } }; EventDispatcher.call(_self); _self.time = _self.frame = 0; _self.tick = function() { _tick(true); }; _self.lagSmoothing = function(threshold, adjustedLag) { _lagThreshold = threshold || (1 / _tinyNum); //zero should be interpreted as basically unlimited _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0); }; _self.sleep = function() { Eif (_id == null) { return; } if (!_useRAF || !_cancelAnimFrame) { clearTimeout(_id); } else { _cancelAnimFrame(_id); } _req = _emptyFunc; _id = null; if (_self === _ticker) { _tickerActive = false; } }; _self.wake = function(seamless) { Eif (_id !== null) { _self.sleep(); } else if (seamless) { _startTime += -_lastUpdate + (_lastUpdate = _getTime()); } else if (_self.frame > 10) { //don't trigger lagSmoothing if we're just waking up, and make sure that at least 10 frames have elapsed because of the iOS bug that we work around below with the 1.5-second setTimout(). _lastUpdate = _getTime() - _lagThreshold + 5; } _req = (_fps === 0) ? _emptyFunc : (!_useRAF || !_reqAnimFrame) ? function(f) { return setTimeout(f, ((_nextTime - _self.time) * 1000 + 1) | 0); } : _reqAnimFrame; if (_self === _ticker) { _tickerActive = true; } _tick(2); }; _self.fps = function(value) { Iif (!arguments.length) { return _fps; } _fps = value; _gap = 1 / (_fps || 60); _nextTime = this.time + _gap; _self.wake(); }; _self.useRAF = function(value) { if (!arguments.length) { return _useRAF; } _self.sleep(); _useRAF = value; _self.fps(_fps); }; _self.fps(fps); //a bug in iOS 6 Safari occasionally prevents the requestAnimationFrame from working initially, so we use a 1.5-second timeout that automatically falls back to setTimeout() if it senses this condition. setTimeout(function() { if (_useRAF === "auto" && _self.frame < 5 && _doc.visibilityState !== "hidden") { _self.useRAF(false); } }, 1500); }); p = gs.Ticker.prototype = new gs.events.EventDispatcher(); p.constructor = gs.Ticker; /* * ---------------------------------------------------------------- * Animation * ---------------------------------------------------------------- */ var Animation = _class("core.Animation", function(duration, vars) { this.vars = vars = vars || {}; this._duration = this._totalDuration = duration || 0; this._delay = Number(vars.delay) || 0; this._timeScale = 1; this._active = (vars.immediateRender === true); this.data = vars.data; this._reversed = (vars.reversed === true); if (!_rootTimeline) { return; } if (!_tickerActive) { //some browsers (like iOS 6 Safari) shut down JavaScript execution when the tab is disabled and they [occasionally] neglect to start up requestAnimationFrame again when returning - this code ensures that the engine starts up again properly. _ticker.wake(); } var tl = this.vars.useFrames ? _rootFramesTimeline : _rootTimeline; tl.add(this, tl._time); Iif (this.vars.paused) { this.paused(true); } }); _ticker = Animation.ticker = new gs.Ticker(); p = Animation.prototype; p._dirty = p._gc = p._initted = p._paused = false; p._totalTime = p._time = 0; p._rawPrevTime = -1; p._next = p._last = p._onUpdate = p._timeline = p.timeline = null; p._paused = false; //some browsers (like iOS) occasionally drop the requestAnimationFrame event when the user switches to a different tab and then comes back again, so we use a 2-second setTimeout() to sense if/when that condition occurs and then wake() the ticker. var _checkTimeout = function() { Iif (_tickerActive && _getTime() - _lastUpdate > 2000) { _ticker.wake(); } setTimeout(_checkTimeout, 2000); }; _checkTimeout(); p.play = function(from, suppressEvents) { if (from != null) { this.seek(from, suppressEvents); } return this.reversed(false).paused(false); }; p.pause = function(atTime, suppressEvents) { if (atTime != null) { this.seek(atTime, suppressEvents); } return this.paused(true); }; p.resume = function(from, suppressEvents) { if (from != null) { this.seek(from, suppressEvents); } return this.paused(false); }; p.seek = function(time, suppressEvents) { return this.totalTime(Number(time), suppressEvents !== false); }; p.restart = function(includeDelay, suppressEvents) { return this.reversed(false).paused(false).totalTime(includeDelay ? -this._delay : 0, (suppressEvents !== false), true); }; p.reverse = function(from, suppressEvents) { if (from != null) { this.seek((from || this.totalDuration()), suppressEvents); } return this.reversed(true).paused(false); }; p.render = function(time, suppressEvents, force) { //stub - we override this method in subclasses. }; p.invalidate = function() { this._time = this._totalTime = 0; this._initted = this._gc = false; this._rawPrevTime = -1; if (this._gc || !this.timeline) { this._enabled(true); } return this; }; p.isActive = function() { var tl = this._timeline, //the 2 root timelines won't have a _timeline; they're always active. startTime = this._startTime, rawTime; return (!tl || (!this._gc && !this._paused && tl.isActive() && (rawTime = tl.rawTime(true)) >= startTime && rawTime < startTime + this.totalDuration() / this._timeScale)); }; p._enabled = function (enabled, ignoreTimeline) { if (!_tickerActive) { _ticker.wake(); } this._gc = !enabled; this._active = this.isActive(); Eif (ignoreTimeline !== true) { Iif (enabled && !this.timeline) { this._timeline.add(this, this._startTime - this._delay); } else if (!enabled && this.timeline) { this._timeline._remove(this, true); } } return false; }; p._kill = function(vars, target) { return this._enabled(false, false); }; p.kill = function(vars, target) { this._kill(vars, target); return this; }; p._uncache = function(includeSelf) { var tween = includeSelf ? this : this.timeline; while (tween) { tween._dirty = true; tween = tween.timeline; } return this; }; p._swapSelfInParams = function(params) { var i = params.length, copy = params.concat(); while (--i > -1) { if (params[i] === "{self}") { copy[i] = this; } } return copy; }; p._callback = function(type) { var v = this.vars, callback = v[type], params = v[type + "Params"], scope = v[type + "Scope"] || v.callbackScope || this, l = params ? params.length : 0; switch (l) { //speed optimization; call() is faster than apply() so use it when there are only a few parameters (which is by far most common). Previously we simply did var v = this.vars; v[type].apply(v[type + "Scope"] || v.callbackScope || this, v[type + "Params"] || _blankArray); case 0: callback.call(scope); break; case 1: callback.call(scope, params[0]); break; case 2: callback.call(scope, params[0], params[1]); break; default: callback.apply(scope, params); } }; //----Animation getters/setters -------------------------------------------------------- p.eventCallback = function(type, callback, params, scope) { if ((type || "").substr(0,2) === "on") { var v = this.vars; if (arguments.length === 1) { return v[type]; } if (callback == null) { delete v[type]; } else { v[type] = callback; v[type + "Params"] = (_isArray(params) && params.join("").indexOf("{self}") !== -1) ? this._swapSelfInParams(params) : params; v[type + "Scope"] = scope; } if (type === "onUpdate") { this._onUpdate = callback; } } return this; }; p.delay = function(value) { if (!arguments.length) { return this._delay; } if (this._timeline.smoothChildTiming) { this.startTime( this._startTime + value - this._delay ); } this._delay = value; return this; }; p.duration = function(value) { if (!arguments.length) { this._dirty = false; return this._duration; } this._duration = this._totalDuration = value; this._uncache(true); //true in case it's a TweenMax or TimelineMax that has a repeat - we'll need to refresh the totalDuration. if (this._timeline.smoothChildTiming) if (this._time > 0) if (this._time < this._duration) if (value !== 0) { this.totalTime(this._totalTime * (value / this._duration), true); } return this; }; p.totalDuration = function(value) { this._dirty = false; return (!arguments.length) ? this._totalDuration : this.duration(value); }; p.time = function(value, suppressEvents) { if (!arguments.length) { return this._time; } if (this._dirty) { this.totalDuration(); } return this.totalTime((value > this._duration) ? this._duration : value, suppressEvents); }; p.totalTime = function(time, suppressEvents, uncapped) { if (!_tickerActive) { _ticker.wake(); } if (!arguments.length) { return this._totalTime; } if (this._timeline) { if (time < 0 && !uncapped) { time += this.totalDuration(); } if (this._timeline.smoothChildTiming) { if (this._dirty) { this.totalDuration(); } var totalDuration = this._totalDuration, tl = this._timeline; if (time > totalDuration && !uncapped) { time = totalDuration; } this._startTime = (this._paused ? this._pauseTime : tl._time) - ((!this._reversed ? time : totalDuration - time) / this._timeScale); if (!tl._dirty) { //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here. this._uncache(false); } //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The startTime of that child would get pushed out, but one of the ancestors may have completed. if (tl._timeline) { while (tl._timeline) { if (tl._timeline._time !== (tl._startTime + tl._totalTime) / tl._timeScale) { tl.totalTime(tl._totalTime, true); } tl = tl._timeline; } } } if (this._gc) { this._enabled(true, false); } if (this._totalTime !== time || this._duration === 0) { if (_lazyTweens.length) { _lazyRender(); } this.render(time, suppressEvents, false); if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render. _lazyRender(); } } } return this; }; p.progress = p.totalProgress = function(value, suppressEvents) { var duration = this.duration(); return (!arguments.length) ? (duration ? this._time / duration : this.ratio) : this.totalTime(duration * value, suppressEvents); }; p.startTime = function(value) { if (!arguments.length) { return this._startTime; } if (value !== this._startTime) { this._startTime = value; if (this.timeline) if (this.timeline._sortChildren) { this.timeline.add(this, value - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct. } } return this; }; p.endTime = function(includeRepeats) { return this._startTime + ((includeRepeats != false) ? this.totalDuration() : this.duration()) / this._timeScale; }; p.timeScale = function(value) { if (!arguments.length) { return this._timeScale; } value = value || _tinyNum; //can't allow zero because it'll throw the math off if (this._timeline && this._timeline.smoothChildTiming) { var pauseTime = this._pauseTime, t = (pauseTime || pauseTime === 0) ? pauseTime : this._timeline.totalTime(); this._startTime = t - ((t - this._startTime) * this._timeScale / value); } this._timeScale = value; return this._uncache(false); }; p.reversed = function(value) { if (!arguments.length) { return this._reversed; } if (value != this._reversed) { this._reversed = value; this.totalTime(((this._timeline && !this._timeline.smoothChildTiming) ? this.totalDuration() - this._totalTime : this._totalTime), true); } return this; }; p.paused = function(value) { if (!arguments.length) { return this._paused; } var tl = this._timeline, raw, elapsed; if (value != this._paused) if (tl) { if (!_tickerActive && !value) { _ticker.wake(); } raw = tl.rawTime(); elapsed = raw - this._pauseTime; if (!value && tl.smoothChildTiming) { this._startTime += elapsed; this._uncache(false); } this._pauseTime = value ? raw : null; this._paused = value; this._active = this.isActive(); if (!value && elapsed !== 0 && this._initted && this.duration()) { raw = tl.smoothChildTiming ? this._totalTime : (raw - this._startTime) / this._timeScale; this.render(raw, (raw === this._totalTime), true); //in case the target's properties changed via some other tween or manual update by the user, we should force a render. } } if (this._gc && !value) { this._enabled(true, false); } return this; }; /* * ---------------------------------------------------------------- * SimpleTimeline * ---------------------------------------------------------------- */ var SimpleTimeline = _class("core.SimpleTimeline", function(vars) { Animation.call(this, 0, vars); this.autoRemoveChildren = this.smoothChildTiming = true; }); p = SimpleTimeline.prototype = new Animation(); p.constructor = SimpleTimeline; p.kill()._gc = false; p._first = p._last = p._recent = null; p._sortChildren = false; p.add = p.insert = function(child, position, align, stagger) { var prevTween, st; child._startTime = Number(position || 0) + child._delay; Iif (child._paused) if (this !== child._timeline) { //we only adjust the _pauseTime if it wasn't in this timeline already. Remember, sometimes a tween will be inserted again into the same timeline when its startTime is changed so that the tweens in the TimelineLite/Max are re-ordered properly in the linked list (so everything renders in the proper order). child._pauseTime = child._startTime + ((this.rawTime() - child._startTime) / child._timeScale); } Iif (child.timeline) { child.timeline._remove(child, true); //removes from existing timeline so that it can be properly added to this one. } child.timeline = child._timeline = this; Iif (child._gc) { child._enabled(true, true); } prevTween = this._last; Iif (this._sortChildren) { st = child._startTime; while (prevTween && prevTween._startTime > st) { prevTween = prevTween._prev; } } Iif (prevTween) { child._next = prevTween._next; prevTween._next = child; } else { child._next = this._first; this._first = child; } Iif (child._next) { child._next._prev = child; } else { this._last = child; } child._prev = prevTween; this._recent = child; Iif (this._timeline) { this._uncache(true); } return this; }; p._remove = function(tween, skipDisable) { Eif (tween.timeline === this) { Iif (!skipDisable) { tween._enabled(false, true); } Iif (tween._prev) { tween._prev._next = tween._next; } else Eif (this._first === tween) { this._first = tween._next; } Iif (tween._next) { tween._next._prev = tween._prev; } else Eif (this._last === tween) { this._last = tween._prev; } tween._next = tween._prev = tween.timeline = null; Eif (tween === this._recent) { this._recent = this._last; } Iif (this._timeline) { this._uncache(true); } } return this; }; p.render = function(time, suppressEvents, force) { var tween = this._first, next; this._totalTime = this._time = this._rawPrevTime = time; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (tween._active || (time >= tween._startTime && !tween._paused)) { if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } }; p.rawTime = function() { if (!_tickerActive) { _ticker.wake(); } return this._totalTime; }; /* * ---------------------------------------------------------------- * TweenLite * ---------------------------------------------------------------- */ var TweenLite = _class("TweenLite", function(target, duration, vars) { Animation.call(this, duration, vars); this.render = TweenLite.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method) Iif (target == null) { throw "Cannot tween a null target."; } this.target = target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target; var isSelector = (target.jquery || (target.length && target !== window && target[0] && (target[0] === window || (target[0].nodeType && target[0].style && !target.nodeType)))), overwrite = this.vars.overwrite, i, targ, targets; this._overwrite = overwrite = (overwrite == null) ? _overwriteLookup[TweenLite.defaultOverwrite] : (typeof(overwrite) === "number") ? overwrite >> 0 : _overwriteLookup[overwrite]; Iif ((isSelector || target instanceof Array || (target.push && _isArray(target))) && typeof(target[0]) !== "number") { this._targets = targets = _slice(target); //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() this._propLookup = []; this._siblings = []; for (i = 0; i < targets.length; i++) { targ = targets[i]; if (!targ) { targets.splice(i--, 1); continue; } else if (typeof(targ) === "string") { targ = targets[i--] = TweenLite.selector(targ); //in case it's an array of strings if (typeof(targ) === "string") { targets.splice(i+1, 1); //to avoid an endless loop (can't imagine why the selector would return a string, but just in case) } continue; } else if (targ.length && targ !== window && targ[0] && (targ[0] === window || (targ[0].nodeType && targ[0].style && !targ.nodeType))) { //in case the user is passing in an array of selector objects (like jQuery objects), we need to check one more level and pull things out if necessary. Also note that <select> elements pass all the criteria regarding length and the first child having style, so we must also check to ensure the target isn't an HTML node itself. targets.splice(i--, 1); this._targets = targets = targets.concat(_slice(targ)); continue; } this._siblings[i] = _register(targ, this, false); if (overwrite === 1) if (this._siblings[i].length > 1) { _applyOverwrite(targ, this, null, 1, this._siblings[i]); } } } else { this._propLookup = {}; this._siblings = _register(target, this, false); Iif (overwrite === 1) if (this._siblings.length > 1) { _applyOverwrite(target, this, null, 1, this._siblings); } } Iif (this.vars.immediateRender || (duration === 0 && this._delay === 0 && this.vars.immediateRender !== false)) { this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render) this.render(Math.min(0, -this._delay)); //in case delay is negative } }, true), _isSelector = function(v) { return (v && v.length && v !== window && v[0] && (v[0] === window || (v[0].nodeType && v[0].style && !v.nodeType))); //we cannot check "nodeType" if the target is window from within an iframe, otherwise it will trigger a security error in some browsers like Firefox. }, _autoCSS = function(vars, target) { var css = {}, p; for (p in vars) { if (!_reservedProps[p] && (!(p in target) || p === "transform" || p === "x" || p === "y" || p === "width" || p === "height" || p === "className" || p === "border") && (!_plugins[p] || (_plugins[p] && _plugins[p]._autoCSS))) { //note: <img> elements contain read-only "x" and "y" properties. We should also prioritize editing css width/height rather than the element's properties. css[p] = vars[p]; delete vars[p]; } } vars.css = css; }; p = TweenLite.prototype = new Animation(); p.constructor = TweenLite; p.kill()._gc = false; //----TweenLite defaults, overwrite management, and root updates ---------------------------------------------------- p.ratio = 0; p._firstPT = p._targets = p._overwrittenProps = p._startAt = null; p._notifyPluginsOfEnabled = p._lazy = false; TweenLite.version = "1.19.1"; TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1); TweenLite.defaultOverwrite = "auto"; TweenLite.ticker = _ticker; TweenLite.autoSleep = 120; TweenLite.lagSmoothing = function(threshold, adjustedLag) { _ticker.lagSmoothing(threshold, adjustedLag); }; TweenLite.selector = window.$ || window.jQuery || function(e) { var selector = window.$ || window.jQuery; if (selector) { TweenLite.selector = selector; return selector(e); } return (typeof(_doc) === "undefined") ? e : (_doc.querySelectorAll ? _doc.querySelectorAll(e) : _doc.getElementById((e.charAt(0) === "#") ? e.substr(1) : e)); }; var _lazyTweens = [], _lazyLookup = {}, _numbersExp = /(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, //_nonNumbersExp = /(?:([\-+](?!(\d|=)))|[^\d\-+=e]|(e(?![\-+][\d])))+/ig, _setRatio = function(v) { var pt = this._firstPT, min = 0.000001, val; while (pt) { val = !pt.blob ? pt.c * v + pt.s : (v === 1) ? this.end : v ? this.join("") : this.start; if (pt.m) { val = pt.m(val, this._target || pt.t); } else if (val < min) if (val > -min && !pt.blob) { //prevents issues with converting very small numbers to strings in the browser val = 0; } if (!pt.f) { pt.t[pt.p] = val; } else if (pt.fp) { pt.t[pt.p](pt.fp, val); } else { pt.t[pt.p](val); } pt = pt._next; } }, //compares two strings (start/end), finds the numbers that are different and spits back an array representing the whole value but with the changing values isolated as elements. For example, "rgb(0,0,0)" and "rgb(100,50,0)" would become ["rgb(", 0, ",", 50, ",0)"]. Notice it merges the parts that are identical (performance optimization). The array also has a linked list of PropTweens attached starting with _firstPT that contain the tweening data (t, p, s, c, f, etc.). It also stores the starting value as a "start" property so that we can revert to it if/when necessary, like when a tween rewinds fully. If the quantity of numbers differs between the start and end, it will always prioritize the end value(s). The pt parameter is optional - it's for a PropTween that will be appended to the end of the linked list and is typically for actually setting the value after all of the elements have been updated (with array.join("")). _blobDif = function(start, end, filter, pt) { var a = [], charIndex = 0, s = "", color = 0, startNums, endNums, num, i, l, nonNumbers, currentNum; a.start = start; a.end = end; start = a[0] = start + ""; //ensure values are strings end = a[1] = end + ""; if (filter) { filter(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values. start = a[0]; end = a[1]; } a.length = 0; startNums = start.match(_numbersExp) || []; endNums = end.match(_numbersExp) || []; if (pt) { pt._next = null; pt.blob = 1; a._firstPT = a._applyPT = pt; //apply last in the linked list (which means inserting it first) } l = endNums.length; for (i = 0; i < l; i++) { currentNum = endNums[i]; nonNumbers = end.substr(charIndex, end.indexOf(currentNum, charIndex)-charIndex); s += (nonNumbers || !i) ? nonNumbers : ","; //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case. charIndex += nonNumbers.length; if (color) { //sense rgba() values and round them. color = (color + 1) % 5; } else if (nonNumbers.substr(-5) === "rgba(") { color = 1; } if (currentNum === startNums[i] || startNums.length <= i) { s += currentNum; } else { if (s) { a.push(s); s = ""; } num = parseFloat(startNums[i]); a.push(num); a._firstPT = {_next: a._firstPT, t:a, p: a.length-1, s:num, c:((currentNum.charAt(1) === "=") ? parseInt(currentNum.charAt(0) + "1", 10) * parseFloat(currentNum.substr(2)) : (parseFloat(currentNum) - num)) || 0, f:0, m:(color && color < 4) ? Math.round : 0}; //note: we don't set _prev because we'll never need to remove individual PropTweens from this list. } charIndex += currentNum.length; } s += end.substr(charIndex); if (s) { a.push(s); } a.setRatio = _setRatio; return a; }, //note: "funcParam" is only necessary for function-based getters/setters that require an extra parameter like getAttribute("width") and setAttribute("width", value). In this example, funcParam would be "width". Used by AttrPlugin for example. _addPropTween = function(target, prop, start, end, overwriteProp, mod, funcParam, stringFilter, index) { if (typeof(end) === "function") { end = end(index || 0, target); } var type = typeof(target[prop]), getterName = (type !== "function") ? "" : ((prop.indexOf("set") || typeof(target["get" + prop.substr(3)]) !== "function") ? prop : "get" + prop.substr(3)), s = (start !== "get") ? start : !getterName ? target[prop] : funcParam ? target[getterName](funcParam) : target[getterName](), isRelative = (typeof(end) === "string" && end.charAt(1) === "="), pt = {t:target, p:prop, s:s, f:(type === "function"), pg:0, n:overwriteProp || prop, m:(!mod ? 0 : (typeof(mod) === "function") ? mod : Math.round), pr:0, c:isRelative ? parseInt(end.charAt(0) + "1", 10) * parseFloat(end.substr(2)) : (parseFloat(end) - s) || 0}, blob; if (typeof(s) !== "number" || (typeof(end) !== "number" && !isRelative)) { if (funcParam || isNaN(s) || (!isRelative && isNaN(end)) || typeof(s) === "boolean" || typeof(end) === "boolean") { //a blob (string that has multiple numbers in it) pt.fp = funcParam; blob = _blobDif(s, (isRelative ? pt.s + pt.c : end), stringFilter || TweenLite.defaultStringFilter, pt); pt = {t: blob, p: "setRatio", s: 0, c: 1, f: 2, pg: 0, n: overwriteProp || prop, pr: 0, m: 0}; //"2" indicates it's a Blob property tween. Needed for RoundPropsPlugin for example. } else { pt.s = parseFloat(s); if (!isRelative) { pt.c = (parseFloat(end) - pt.s) || 0; } } } if (pt.c) { //only add it to the linked list if there's a change. if ((pt._next = this._firstPT)) { pt._next._prev = pt; } this._firstPT = pt; return pt; } }, _internals = TweenLite._internals = {isArray:_isArray, isSelector:_isSelector, lazyTweens:_lazyTweens, blobDif:_blobDif}, //gives us a way to expose certain private values to other GreenSock classes without contaminating tha main TweenLite object. _plugins = TweenLite._plugins = {}, _tweenLookup = _internals.tweenLookup = {}, _tweenLookupNum = 0, _reservedProps = _internals.reservedProps = {ease:1, delay:1, overwrite:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, runBackwards:1, startAt:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, autoCSS:1, lazy:1, onOverwrite:1, callbackScope:1, stringFilter:1, id:1}, _overwriteLookup = {none:0, all:1, auto:2, concurrent:3, allOnStart:4, preexisting:5, "true":1, "false":0}, _rootFramesTimeline = Animation._rootFramesTimeline = new SimpleTimeline(), _rootTimeline = Animation._rootTimeline = new SimpleTimeline(), _nextGCFrame = 30, _lazyRender = _internals.lazyRender = function() { var i = _lazyTweens.length, tween; _lazyLookup = {}; while (--i > -1) { tween = _lazyTweens[i]; if (tween && tween._lazy !== false) { tween.render(tween._lazy[0], tween._lazy[1], true); tween._lazy = false; } } _lazyTweens.length = 0; }; _rootTimeline._startTime = _ticker.time; _rootFramesTimeline._startTime = _ticker.frame; _rootTimeline._active = _rootFramesTimeline._active = true; setTimeout(_lazyRender, 1); //on some mobile devices, there isn't a "tick" before code runs which means any lazy renders wouldn't run before the next official "tick". Animation._updateRoot = TweenLite.render = function() { var i, a, p; Iif (_lazyTweens.length) { //if code is run outside of the requestAnimationFrame loop, there may be tweens queued AFTER the engine refreshed, so we need to ensure any pending renders occur before we refresh again. _lazyRender(); } _rootTimeline.render((_ticker.time - _rootTimeline._startTime) * _rootTimeline._timeScale, false, false); _rootFramesTimeline.render((_ticker.frame - _rootFramesTimeline._startTime) * _rootFramesTimeline._timeScale, false, false); Iif (_lazyTweens.length) { _lazyRender(); } Iif (_ticker.frame >= _nextGCFrame) { //dump garbage every 120 frames or whatever the user sets TweenLite.autoSleep to _nextGCFrame = _ticker.frame + (parseInt(TweenLite.autoSleep, 10) || 120); for (p in _tweenLookup) { a = _tweenLookup[p].tweens; i = a.length; while (--i > -1) { if (a[i]._gc) { a.splice(i, 1); } } if (a.length === 0) { delete _tweenLookup[p]; } } //if there are no more tweens in the root timelines, or if they're all paused, make the _timer sleep to reduce load on the CPU slightly p = _rootTimeline._first; if (!p || p._paused) if (TweenLite.autoSleep && !_rootFramesTimeline._first && _ticker._listeners.tick.length === 1) { while (p && p._paused) { p = p._next; } if (!p) { _ticker.sleep(); } } } }; _ticker.addEventListener("tick", Animation._updateRoot); var _register = function(target, tween, scrub) { var id = target._gsTweenID, a, i; Eif (!_tweenLookup[id || (target._gsTweenID = id = "t" + (_tweenLookupNum++))]) { _tweenLookup[id] = {target:target, tweens:[]}; } Eif (tween) { a = _tweenLookup[id].tweens; a[(i = a.length)] = tween; Iif (scrub) { while (--i > -1) { if (a[i] === tween) { a.splice(i, 1); } } } } return _tweenLookup[id].tweens; }, _onOverwrite = function(overwrittenTween, overwritingTween, target, killedProps) { var func = overwrittenTween.vars.onOverwrite, r1, r2; if (func) { r1 = func(overwrittenTween, overwritingTween, target, killedProps); } func = TweenLite.onOverwrite; if (func) { r2 = func(overwrittenTween, overwritingTween, target, killedProps); } return (r1 !== false && r2 !== false); }, _applyOverwrite = function(target, tween, props, mode, siblings) { var i, changed, curTween, l; if (mode === 1 || mode >= 4) { l = siblings.length; for (i = 0; i < l; i++) { if ((curTween = siblings[i]) !== tween) { if (!curTween._gc) { if (curTween._kill(null, target, tween)) { changed = true; } } } else if (mode === 5) { break; } } return changed; } //NOTE: Add 0.0000000001 to overcome floating point errors that can cause the startTime to be VERY slightly off (when a tween's time() is set for example) var startTime = tween._startTime + _tinyNum, overlaps = [], oCount = 0, zeroDur = (tween._duration === 0), globalStart; i = siblings.length; while (--i > -1) { if ((curTween = siblings[i]) === tween || curTween._gc || curTween._paused) { //ignore } else if (curTween._timeline !== tween._timeline) { globalStart = globalStart || _checkOverlap(tween, 0, zeroDur); if (_checkOverlap(curTween, globalStart, zeroDur) === 0) { overlaps[oCount++] = curTween; } } else if (curTween._startTime <= startTime) if (curTween._startTime + curTween.totalDuration() / curTween._timeScale > startTime) if (!((zeroDur || !curTween._initted) && startTime - curTween._startTime <= 0.0000000002)) { overlaps[oCount++] = curTween; } } i = oCount; while (--i > -1) { curTween = overlaps[i]; if (mode === 2) if (curTween._kill(props, target, tween)) { changed = true; } if (mode !== 2 || (!curTween._firstPT && curTween._initted)) { if (mode !== 2 && !_onOverwrite(curTween, tween)) { continue; } if (curTween._enabled(false, false)) { //if all property tweens have been overwritten, kill the tween. changed = true; } } } return changed; }, _checkOverlap = function(tween, reference, zeroDur) { var tl = tween._timeline, ts = tl._timeScale, t = tween._startTime; while (tl._timeline) { t += tl._startTime; ts *= tl._timeScale; if (tl._paused) { return -100; } tl = tl._timeline; } t /= ts; return (t > reference) ? t - reference : ((zeroDur && t === reference) || (!tween._initted && t - reference < 2 * _tinyNum)) ? _tinyNum : ((t += tween.totalDuration() / tween._timeScale / ts) > reference + _tinyNum) ? 0 : t - reference - _tinyNum; }; //---- TweenLite instance methods ----------------------------------------------------------------------------- p._init = function() { var v = this.vars, op = this._overwrittenProps, dur = this._duration, immediate = !!v.immediateRender, ease = v.ease, i, initPlugins, pt, p, startVars, l; if (v.startAt) { if (this._startAt) { this._startAt.render(-1, true); //if we've run a startAt previously (when the tween instantiated), we should revert it so that the values re-instantiate correctly particularly for relative tweens. Without this, a TweenLite.fromTo(obj, 1, {x:"+=100"}, {x:"-=100"}), for example, would actually jump to +=200 because the startAt would run twice, doubling the relative change. this._startAt.kill(); } startVars = {}; for (p in v.startAt) { //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, 1, from, to).fromTo(e, 1, to, from); startVars[p] = v.startAt[p]; } startVars.overwrite = false; startVars.immediateRender = true; startVars.lazy = (immediate && v.lazy !== false); startVars.startAt = startVars.delay = null; //no nesting of startAt objects allowed (otherwise it could cause an infinite loop). this._startAt = TweenLite.to(this.target, 0, startVars); if (immediate) { if (this._time > 0) { this._startAt = null; //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in TimelineLite/Max instances where immediateRender was false (which is the default in the convenience methods like from()). } else if (dur !== 0) { return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a TimelineLite or TimelineMax, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting. } } } else if (v.runBackwards && dur !== 0) { //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards) if (this._startAt) { this._startAt.render(-1, true); this._startAt.kill(); this._startAt = null; } else { if (this._time !== 0) { //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0 immediate = false; } pt = {}; for (p in v) { //copy props into a new object and skip any reserved props, otherwise onComplete or onUpdate or onStart could fire. We should, however, permit autoCSS to go through. if (!_reservedProps[p] || p === "autoCSS") { pt[p] = v[p]; } } pt.overwrite = 0; pt.data = "isFromStart"; //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in. pt.lazy = (immediate && v.lazy !== false); pt.immediateRender = immediate; //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after) this._startAt = TweenLite.to(this.target, 0, pt); if (!immediate) { this._startAt._init(); //ensures that the initial values are recorded this._startAt._enabled(false); //no need to have the tween render on the next cycle. Disable it because we'll always manually control the renders of the _startAt tween. if (this.vars.immediateRender) { this._startAt = null; } } else if (this._time === 0) { return; } } } this._ease = ease = (!ease) ? TweenLite.defaultEase : (ease instanceof Ease) ? ease : (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase; if (v.easeParams instanceof Array && ease.config) { this._ease = ease.config.apply(ease, v.easeParams); } this._easeType = this._ease._type; this._easePower = this._ease._power; this._firstPT = null; if (this._targets) { l = this._targets.length; for (i = 0; i < l; i++) { if ( this._initProps( this._targets[i], (this._propLookup[i] = {}), this._siblings[i], (op ? op[i] : null), i) ) { initPlugins = true; } } } else { initPlugins = this._initProps(this.target, this._propLookup, this._siblings, op, 0); } if (initPlugins) { TweenLite._onPluginEvent("_onInitAllProps", this); //reorders the array in order of priority. Uses a static TweenPlugin method in order to minimize file size in TweenLite } if (op) if (!this._firstPT) if (typeof(this.target) !== "function") { //if all tweening properties have been overwritten, kill the tween. If the target is a function, it's probably a delayedCall so let it live. this._enabled(false, false); } if (v.runBackwards) { pt = this._firstPT; while (pt) { pt.s += pt.c; pt.c = -pt.c; pt = pt._next; } } this._onUpdate = v.onUpdate; this._initted = true; }; p._initProps = function(target, propLookup, siblings, overwrittenProps, index) { var p, i, initPlugins, plugin, pt, v; if (target == null) { return false; } if (_lazyLookup[target._gsTweenID]) { _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end) } if (!this.vars.css) if (target.style) if (target !== window && target.nodeType) if (_plugins.css) if (this.vars.autoCSS !== false) { //it's so common to use TweenLite/Max to animate the css of DOM elements, we assume that if the target is a DOM element, that's what is intended (a convenience so that users don't have to wrap things in css:{}, although we still recommend it for a slight performance boost and better specificity). Note: we cannot check "nodeType" on the window inside an iframe. _autoCSS(this.vars, target); } for (p in this.vars) { v = this.vars[p]; if (_reservedProps[p]) { if (v) if ((v instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !== -1) { this.vars[p] = v = this._swapSelfInParams(v, this); } } else if (_plugins[p] && (plugin = new _plugins[p]())._onInitTween(target, this.vars[p], this, index)) { //t - target [object] //p - property [string] //s - start [number] //c - change [number] //f - isFunction [boolean] //n - name [string] //pg - isPlugin [boolean] //pr - priority [number] //m - mod [function | 0] this._firstPT = pt = {_next:this._firstPT, t:plugin, p:"setRatio", s:0, c:1, f:1, n:p, pg:1, pr:plugin._priority, m:0}; i = plugin._overwriteProps.length; while (--i > -1) { propLookup[plugin._overwriteProps[i]] = this._firstPT; } if (plugin._priority || plugin._onInitAllProps) { initPlugins = true; } if (plugin._onDisable || plugin._onEnable) { this._notifyPluginsOfEnabled = true; } if (pt._next) { pt._next._prev = pt; } } else { propLookup[p] = _addPropTween.call(this, target, p, "get", v, p, 0, null, this.vars.stringFilter, index); } } if (overwrittenProps) if (this._kill(overwrittenProps, target)) { //another tween may have tried to overwrite properties of this tween before init() was called (like if two tweens start at the same time, the one created second will run first) return this._initProps(target, propLookup, siblings, overwrittenProps, index); } if (this._overwrite > 1) if (this._firstPT) if (siblings.length > 1) if (_applyOverwrite(target, this, propLookup, this._overwrite, siblings)) { this._kill(propLookup, target); return this._initProps(target, propLookup, siblings, overwrittenProps, index); } if (this._firstPT) if ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration)) { //zero duration tweens don't lazy render by default; everything else does. _lazyLookup[target._gsTweenID] = true; } return initPlugins; }; p.render = function(time, suppressEvents, force) { var prevTime = this._time, duration = this._duration, prevRawPrevTime = this._rawPrevTime, isComplete, callback, pt, rawPrevTime; if (time >= duration - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = this._time = duration; this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1; if (!this._reversed ) { isComplete = true; callback = "onComplete"; force = (force || this._timeline.autoRemoveChildren); //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. } if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate. time = 0; } if (prevRawPrevTime < 0 || (time <= 0 && time >= -0.0000001) || (prevRawPrevTime === _tinyNum && this.data !== "isPause")) if (prevRawPrevTime !== time) { //note: when this.data is "isPause", it's a callback added by addPause() on a timeline that we should not be triggered when LEAVING its exact start time. In other words, tl.addPause(1).play(1) shouldn't pause. force = true; if (prevRawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = 0; this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0; if (prevTime !== 0 || (duration === 0 && prevRawPrevTime > 0)) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (prevRawPrevTime >= 0 && !(prevRawPrevTime === _tinyNum && this.data === "isPause")) { force = true; } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately. force = true; } } else { this._totalTime = this._time = time; if (this._easeType) { var r = time / duration, type = this._easeType, pow = this._easePower; if (type === 1 || (type === 3 && r >= 0.5)) { r = 1 - r; } if (type === 3) { r *= 2; } if (pow === 1) { r *= r; } else if (pow === 2) { r *= r * r; } else if (pow === 3) { r *= r * r * r; } else if (pow === 4) { r *= r * r * r * r; } if (type === 1) { this.ratio = 1 - r; } else if (type === 2) { this.ratio = r; } else if (time / duration < 0.5) { this.ratio = r / 2; } else { this.ratio = 1 - (r / 2); } } else { this.ratio = this._ease.getRatio(time / duration); } } if (this._time === prevTime && !force) { return; } else if (!this._initted) { this._init(); if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example. return; } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) { this._time = this._totalTime = prevTime; this._rawPrevTime = prevRawPrevTime; _lazyTweens.push(this); this._lazy = [time, suppressEvents]; return; } //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently. if (this._time && !isComplete) { this.ratio = this._ease.getRatio(this._time / duration); } else if (isComplete && this._ease._calcEnd) { this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1); } } if (this._lazy !== false) { //in case a lazy render is pending, we should flush it because the new render is occurring now (imagine a lazy tween instantiating and then immediately the user calls tween.seek(tween.duration()), skipping to the end - the end render would be forced, and then if we didn't flush the lazy render, it'd fire AFTER the seek(), rendering it at the wrong time. this._lazy = false; } if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) { this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done. } if (prevTime === 0) { if (this._startAt) { if (time >= 0) { this._startAt.render(time, suppressEvents, force); } else if (!callback) { callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area. } } if (this.vars.onStart) if (this._time !== 0 || duration === 0) if (!suppressEvents) { this._callback("onStart"); } } pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](pt.c * this.ratio + pt.s); } else { pt.t[pt.p] = pt.c * this.ratio + pt.s; } pt = pt._next; } if (this._onUpdate) { if (time < 0) if (this._startAt && time !== -0.0001) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values. this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete. } if (!suppressEvents) if (this._time !== prevTime || isComplete || force) { this._callback("onUpdate"); } } if (callback) if (!this._gc || force) { //check _gc because there's a chance that kill() could be called in an onUpdate if (time < 0 && this._startAt && !this._onUpdate && time !== -0.0001) { //-0.0001 is a special value that we use when looping back to the beginning of a repeated TimelineMax, in which case we shouldn't render the _startAt values. this._startAt.render(time, suppressEvents, force); } if (isComplete) { if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless. this._rawPrevTime = 0; } } }; p._kill = function(vars, target, overwritingTween) { Iif (vars === "all") { vars = null; } Eif (vars == null) Eif (target == null || target === this.target) { this._lazy = false; return this._enabled(false, false); } target = (typeof(target) !== "string") ? (target || this._targets || this.target) : TweenLite.selector(target) || target; var simultaneousOverwrite = (overwritingTween && this._time && overwritingTween._startTime === this._startTime && this._timeline === overwritingTween._timeline), i, overwrittenProps, p, pt, propLookup, changed, killProps, record, killed; if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") { i = target.length; while (--i > -1) { if (this._kill(vars, target[i], overwritingTween)) { changed = true; } } } else { if (this._targets) { i = this._targets.length; while (--i > -1) { if (target === this._targets[i]) { propLookup = this._propLookup[i] || {}; this._overwrittenProps = this._overwrittenProps || []; overwrittenProps = this._overwrittenProps[i] = vars ? this._overwrittenProps[i] || {} : "all"; break; } } } else if (target !== this.target) { return false; } else { propLookup = this._propLookup; overwrittenProps = this._overwrittenProps = vars ? this._overwrittenProps || {} : "all"; } if (propLookup) { killProps = vars || propLookup; record = (vars !== overwrittenProps && overwrittenProps !== "all" && vars !== propLookup && (typeof(vars) !== "object" || !vars._tempKill)); //_tempKill is a super-secret way to delete a particular tweening property but NOT have it remembered as an official overwritten property (like in BezierPlugin) if (overwritingTween && (TweenLite.onOverwrite || this.vars.onOverwrite)) { for (p in killProps) { if (propLookup[p]) { if (!killed) { killed = []; } killed.push(p); } } if ((killed || !vars) && !_onOverwrite(this, overwritingTween, target, killed)) { //if the onOverwrite returned false, that means the user wants to override the overwriting (cancel it). return false; } } for (p in killProps) { if ((pt = propLookup[p])) { if (simultaneousOverwrite) { //if another tween overwrites this one and they both start at exactly the same time, yet this tween has already rendered once (for example, at 0.001) because it's first in the queue, we should revert the values to where they were at 0 so that the starting values aren't contaminated on the overwriting tween. if (pt.f) { pt.t[pt.p](pt.s); } else { pt.t[pt.p] = pt.s; } changed = true; } if (pt.pg && pt.t._kill(killProps)) { changed = true; //some plugins need to be notified so they can perform cleanup tasks first } if (!pt.pg || pt.t._overwriteProps.length === 0) { if (pt._prev) { pt._prev._next = pt._next; } else if (pt === this._firstPT) { this._firstPT = pt._next; } if (pt._next) { pt._next._prev = pt._prev; } pt._next = pt._prev = null; } delete propLookup[p]; } if (record) { overwrittenProps[p] = 1; } } if (!this._firstPT && this._initted) { //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening. this._enabled(false, false); } } } return changed; }; p.invalidate = function() { if (this._notifyPluginsOfEnabled) { TweenLite._onPluginEvent("_onDisable", this); } this._firstPT = this._overwrittenProps = this._startAt = this._onUpdate = null; this._notifyPluginsOfEnabled = this._active = this._lazy = false; this._propLookup = (this._targets) ? {} : []; Animation.prototype.invalidate.call(this); if (this.vars.immediateRender) { this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render) this.render(Math.min(0, -this._delay)); //in case delay is negative. } return this; }; p._enabled = function(enabled, ignoreTimeline) { Iif (!_tickerActive) { _ticker.wake(); } Iif (enabled && this._gc) { var targets = this._targets, i; if (targets) { i = targets.length; while (--i > -1) { this._siblings[i] = _register(targets[i], this, true); } } else { this._siblings = _register(this.target, this, true); } } Animation.prototype._enabled.call(this, enabled, ignoreTimeline); Iif (this._notifyPluginsOfEnabled) if (this._firstPT) { return TweenLite._onPluginEvent((enabled ? "_onEnable" : "_onDisable"), this); } return false; }; //----TweenLite static methods ----------------------------------------------------- TweenLite.to = function(target, duration, vars) { return new TweenLite(target, duration, vars); }; TweenLite.from = function(target, duration, vars) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return new TweenLite(target, duration, vars); }; TweenLite.fromTo = function(target, duration, fromVars, toVars) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return new TweenLite(target, duration, toVars); }; TweenLite.delayedCall = function(delay, callback, params, scope, useFrames) { return new TweenLite(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, callbackScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, immediateRender:false, lazy:false, useFrames:useFrames, overwrite:0}); }; TweenLite.set = function(target, vars) { return new TweenLite(target, 0, vars); }; TweenLite.getTweensOf = function(target, onlyActive) { if (target == null) { return []; } target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target; var i, a, j, t; if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") { i = target.length; a = []; while (--i > -1) { a = a.concat(TweenLite.getTweensOf(target[i], onlyActive)); } i = a.length; //now get rid of any duplicates (tweens of arrays of objects could cause duplicates) while (--i > -1) { t = a[i]; j = i; while (--j > -1) { if (t === a[j]) { a.splice(i, 1); } } } } else { a = _register(target).concat(); i = a.length; while (--i > -1) { if (a[i]._gc || (onlyActive && !a[i].isActive())) { a.splice(i, 1); } } } return a; }; TweenLite.killTweensOf = TweenLite.killDelayedCallsTo = function(target, onlyActive, vars) { if (typeof(onlyActive) === "object") { vars = onlyActive; //for backwards compatibility (before "onlyActive" parameter was inserted) onlyActive = false; } var a = TweenLite.getTweensOf(target, onlyActive), i = a.length; while (--i > -1) { a[i]._kill(vars, target); } }; /* * ---------------------------------------------------------------- * TweenPlugin (could easily be split out as a separate file/class, but included for ease of use (so that people don't need to include another script call before loading plugins which is easy to forget) * ---------------------------------------------------------------- */ var TweenPlugin = _class("plugins.TweenPlugin", function(props, priority) { this._overwriteProps = (props || "").split(","); this._propName = this._overwriteProps[0]; this._priority = priority || 0; this._super = TweenPlugin.prototype; }, true); p = TweenPlugin.prototype; TweenPlugin.version = "1.19.0"; TweenPlugin.API = 2; p._firstPT = null; p._addTween = _addPropTween; p.setRatio = _setRatio; p._kill = function(lookup) { var a = this._overwriteProps, pt = this._firstPT, i; if (lookup[this._propName] != null) { this._overwriteProps = []; } else { i = a.length; while (--i > -1) { if (lookup[a[i]] != null) { a.splice(i, 1); } } } while (pt) { if (lookup[pt.n] != null) { if (pt._next) { pt._next._prev = pt._prev; } if (pt._prev) { pt._prev._next = pt._next; pt._prev = null; } else if (this._firstPT === pt) { this._firstPT = pt._next; } } pt = pt._next; } return false; }; p._mod = p._roundProps = function(lookup) { var pt = this._firstPT, val; while (pt) { val = lookup[this._propName] || (pt.n != null && lookup[ pt.n.split(this._propName + "_").join("") ]); if (val && typeof(val) === "function") { //some properties that are very plugin-specific add a prefix named after the _propName plus an underscore, so we need to ignore that extra stuff here. if (pt.f === 2) { pt.t._applyPT.m = val; } else { pt.m = val; } } pt = pt._next; } }; TweenLite._onPluginEvent = function(type, tween) { var pt = tween._firstPT, changed, pt2, first, last, next; if (type === "_onInitAllProps") { //sorts the PropTween linked list in order of priority because some plugins need to render earlier/later than others, like MotionBlurPlugin applies its effects after all x/y/alpha tweens have rendered on each frame. while (pt) { next = pt._next; pt2 = first; while (pt2 && pt2.pr > pt.pr) { pt2 = pt2._next; } if ((pt._prev = pt2 ? pt2._prev : last)) { pt._prev._next = pt; } else { first = pt; } if ((pt._next = pt2)) { pt2._prev = pt; } else { last = pt; } pt = next; } pt = tween._firstPT = first; } while (pt) { if (pt.pg) if (typeof(pt.t[type]) === "function") if (pt.t[type]()) { changed = true; } pt = pt._next; } return changed; }; TweenPlugin.activate = function(plugins) { var i = plugins.length; while (--i > -1) { Eif (plugins[i].API === TweenPlugin.API) { _plugins[(new plugins[i]())._propName] = plugins[i]; } } return true; }; //provides a more concise way to define plugins that have no dependencies besides TweenPlugin and TweenLite, wrapping common boilerplate stuff into one function (added in 1.9.0). You don't NEED to use this to define a plugin - the old way still works and can be useful in certain (rare) situations. _gsDefine.plugin = function(config) { Iif (!config || !config.propName || !config.init || !config.API) { throw "illegal plugin definition."; } var propName = config.propName, priority = config.priority || 0, overwriteProps = config.overwriteProps, map = {init:"_onInitTween", set:"setRatio", kill:"_kill", round:"_mod", mod:"_mod", initAll:"_onInitAllProps"}, Plugin = _class("plugins." + propName.charAt(0).toUpperCase() + propName.substr(1) + "Plugin", function() { TweenPlugin.call(this, propName, priority); this._overwriteProps = overwriteProps || []; }, (config.global === true)), p = Plugin.prototype = new TweenPlugin(propName), prop; p.constructor = Plugin; Plugin.API = config.API; for (prop in map) { if (typeof(config[prop]) === "function") { p[map[prop]] = config[prop]; } } Plugin.version = config.version; TweenPlugin.activate([Plugin]); return Plugin; }; //now run through all the dependencies discovered and if any are missing, log that to the console as a warning. This is why it's best to have TweenLite load last - it can check all the dependencies for you. a = window._gsQueue; Eif (a) { for (i = 0; i < a.length; i++) { a[i](); } for (p in _defLookup) { Iif (!_defLookup[p].func) { window.console.log("GSAP encountered missing dependency: " + p); } } } _tickerActive = false; //ensures that the first official animation forces a ticker.tick() to update the time when it is instantiated })((typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window, "TweenMax"); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | 2 | /*! * VERSION: 0.1.12 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com/jquery-gsap-plugin/ * * Requires TweenLite version 1.8.0 or higher and CSSPlugin. * * @license Copyright (c) 2013-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ (function($) { "use strict"; var _animate = $.fn.animate, _stop = $.fn.stop, _enabled = true, TweenLite, CSSPlugin, _warned, _copy = function(o) { var copy = {}, p; for (p in o) { copy[p] = o[p]; } return copy; }, _reserved = {overwrite:1, delay:1, useFrames:1, runBackwards:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, autoCSS:1}, _defaultLegacyProps = ",scrollTop,scrollLeft,show,hide,toggle,", _legacyProps = _defaultLegacyProps, _copyCriticalReserved = function(main, sub) { for (var p in _reserved) { if (_reserved[p] && main[p] !== undefined) { sub[p] = main[p]; } } }, _createEase = function(ease) { return function(p) { return ease.getRatio(p); }; }, _easeMap = {}, _init = function() { var globals = window.GreenSockGlobals || window, version, stale, p; TweenLite = globals.TweenMax || globals.TweenLite; //we prioritize TweenMax if it's loaded so that we can accommodate special features like repeat, yoyo, repeatDelay, etc. if (TweenLite) { version = (TweenLite.version + ".0.0").split("."); //in case an old version of TweenLite is used that had a numeric version like 1.68 instead of a string like "1.6.8" stale = !(Number(version[0]) > 0 && Number(version[1]) > 7); globals = globals.com.greensock; CSSPlugin = globals.plugins.CSSPlugin; _easeMap = globals.easing.Ease.map || {}; //don't do just window.Ease or window.CSSPlugin because some other libraries like EaselJS/TweenJS use those same names and there could be a collision. } if (!TweenLite || !CSSPlugin || stale) { TweenLite = null; if (!_warned && window.console) { window.console.log("The jquery.gsap.js plugin requires the TweenMax (or at least TweenLite and CSSPlugin) JavaScript file(s)." + (stale ? " Version " + version.join(".") + " is too old." : "")); _warned = true; } return; } if ($.easing) { for (p in _easeMap) { $.easing[p] = _createEase(_easeMap[p]); } _init = false; } }; $.fn.animate = function(prop, speed, easing, callback) { prop = prop || {}; if (_init) { _init(); if (!TweenLite || !CSSPlugin) { return _animate.call(this, prop, speed, easing, callback); } } if (!_enabled || prop.skipGSAP === true || (typeof(speed) === "object" && typeof(speed.step) === "function")) { //we don't support the "step" feature because it's too costly performance-wise, so fall back to the native animate() call if we sense one. Same with scrollTop and scrollLeft which are handled in a special way in jQuery. return _animate.call(this, prop, speed, easing, callback); } var config = $.speed(speed, easing, callback), vars = {ease:(_easeMap[config.easing] || ((config.easing === false) ? _easeMap.linear : _easeMap.swing))}, obj = this, specEasing = (typeof(speed) === "object") ? speed.specialEasing : null, val, p, doAnimation, specEasingVars; for (p in prop) { val = prop[p]; if (val instanceof Array && _easeMap[val[1]]) { specEasing = specEasing || {}; specEasing[p] = val[1]; val = val[0]; } if (val === "show" || val === "hide" || val === "toggle" || (_legacyProps.indexOf(p) !== -1 && _legacyProps.indexOf("," + p + ",") !== -1)) { //note: slideUp() and slideDown() pass in opacity:"show" or opacity:"hide" return _animate.call(this, prop, speed, easing, callback); } else { vars[(p.indexOf("-") === -1) ? p : $.camelCase(p)] = val; } } if (specEasing) { vars = _copy(vars); specEasingVars = []; for (p in specEasing) { val = specEasingVars[specEasingVars.length] = {}; _copyCriticalReserved(vars, val); val.ease = (_easeMap[specEasing[p]] || vars.ease); if (p.indexOf("-") !== -1) { p = $.camelCase(p); } val[p] = vars[p]; delete vars[p]; } if (specEasingVars.length === 0) { specEasingVars = null; } } doAnimation = function(next) { var varsCopy = _copy(vars), i; if (specEasingVars) { i = specEasingVars.length; while (--i > -1) { TweenLite.to(this, $.fx.off ? 0 : config.duration / 1000, specEasingVars[i]); } } varsCopy.onComplete = function() { if (next) { next(); } else if (config.old) { $(this).each(config.old); } }; TweenLite.to(this, $.fx.off ? 0 : config.duration / 1000, varsCopy); }; if (config.queue !== false) { obj.queue(config.queue, doAnimation); //note: the queued function will get called once for each element in the jQuery collection. if (typeof(config.old) === "function") { $(obj[obj.length-1]).queue(config.queue, function(next) { config.old.call(obj); next(); }); } } else { doAnimation.call(obj); } return obj; }; $.fn.stop = function(clearQueue, gotoEnd) { _stop.call(this, clearQueue, gotoEnd); if (TweenLite) { if (gotoEnd) { var tweens = TweenLite.getTweensOf(this), i = tweens.length, progress; while (--i > -1) { progress = tweens[i].totalTime() / tweens[i].totalDuration(); if (progress > 0 && progress < 1) { tweens[i].seek(tweens[i].totalDuration()); } } } TweenLite.killTweensOf(this); } return this; }; $.gsap = { enabled:function(value) { _enabled = value; }, version:"0.1.12", legacyProps:function(value) { _legacyProps = _defaultLegacyProps + value + ","; } }; }(jQuery)); |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| TweenLite.js | 0.34% | (4 / 1174) | 0.49% | (6 / 1228) | 1.01% | (1 / 99) | 0.35% | (4 / 1127) | |
| TweenMax.js | 8.07% | (375 / 4644) | 2.45% | (113 / 4610) | 10.08% | (36 / 357) | 8.31% | (374 / 4503) | |
| jquery.gsap.js | 1.06% | (1 / 94) | 0% | (0 / 92) | 0% | (0 / 13) | 1.06% | (1 / 94) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 | 1 1 1 1 | /*!
* VERSION: 1.19.1
* DATE: 2017-01-17
* UPDATES AND DOCS AT: http://greensock.com
*
* @license Copyright (c) 2008-2017, GreenSock. All rights reserved.
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
*/
(function(window, moduleName) {
"use strict";
var _exports = {},
_doc = window.document,
_globals = window.GreenSockGlobals = window.GreenSockGlobals || window;
Eif (_globals.TweenLite) {
return; //in case the core set of classes is already loaded, don't instantiate twice.
}
var _namespace = function(ns) {
var a = ns.split("."),
p = _globals, i;
for (i = 0; i < a.length; i++) {
p[a[i]] = p = p[a[i]] || {};
}
return p;
},
gs = _namespace("com.greensock"),
_tinyNum = 0.0000000001,
_slice = function(a) { //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll()
var b = [],
l = a.length,
i;
for (i = 0; i !== l; b.push(a[i++])) {}
return b;
},
_emptyFunc = function() {},
_isArray = (function() { //works around issues in iframe environments where the Array global isn't shared, thus if the object originates in a different window/iframe, "(obj instanceof Array)" will evaluate false. We added some speed optimizations to avoid Object.prototype.toString.call() unless it's absolutely necessary because it's VERY slow (like 20x slower)
var toString = Object.prototype.toString,
array = toString.call([]);
return function(obj) {
return obj != null && (obj instanceof Array || (typeof(obj) === "object" && !!obj.push && toString.call(obj) === array));
};
}()),
a, i, p, _ticker, _tickerActive,
_defLookup = {},
/**
* @constructor
* Defines a GreenSock class, optionally with an array of dependencies that must be instantiated first and passed into the definition.
* This allows users to load GreenSock JS files in any order even if they have interdependencies (like CSSPlugin extends TweenPlugin which is
* inside TweenLite.js, but if CSSPlugin is loaded first, it should wait to run its code until TweenLite.js loads and instantiates TweenPlugin
* and then pass TweenPlugin to CSSPlugin's definition). This is all done automatically and internally.
*
* Every definition will be added to a "com.greensock" global object (typically window, but if a window.GreenSockGlobals object is found,
* it will go there as of v1.7). For example, TweenLite will be found at window.com.greensock.TweenLite and since it's a global class that should be available anywhere,
* it is ALSO referenced at window.TweenLite. However some classes aren't considered global, like the base com.greensock.core.Animation class, so
* those will only be at the package like window.com.greensock.core.Animation. Again, if you define a GreenSockGlobals object on the window, everything
* gets tucked neatly inside there instead of on the window directly. This allows you to do advanced things like load multiple versions of GreenSock
* files and put them into distinct objects (imagine a banner ad uses a newer version but the main site uses an older one). In that case, you could
* sandbox the banner one like:
*
* <script>
* var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever.
* </script>
* <script src="js/greensock/v1.7/TweenMax.js"></script>
* <script>
* window.GreenSockGlobals = window._gsQueue = window._gsDefine = null; //reset it back to null (along with the special _gsQueue variable) so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...)
* </script>
* <script src="js/greensock/v1.6/TweenMax.js"></script>
* <script>
* gs.TweenLite.to(...); //would use v1.7
* TweenLite.to(...); //would use v1.6
* </script>
*
* @param {!string} ns The namespace of the class definition, leaving off "com.greensock." as that's assumed. For example, "TweenLite" or "plugins.CSSPlugin" or "easing.Back".
* @param {!Array.<string>} dependencies An array of dependencies (described as their namespaces minus "com.greensock." prefix). For example ["TweenLite","plugins.TweenPlugin","core.Animation"]
* @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition.
* @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object)
*/
Definition = function(ns, dependencies, func, global) {
this.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses
_defLookup[ns] = this;
this.gsClass = null;
this.func = func;
var _classes = [];
this.check = function(init) {
var i = dependencies.length,
missing = i,
cur, a, n, cl, hasModule;
while (--i > -1) {
if ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) {
_classes[i] = cur.gsClass;
missing--;
} else if (init) {
cur.sc.push(this);
}
}
if (missing === 0 && func) {
a = ("com.greensock." + ns).split(".");
n = a.pop();
cl = _namespace(a.join("."))[n] = this.gsClass = func.apply(func, _classes);
//exports to multiple environments
if (global) {
_globals[n] = _exports[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.)
hasModule = (typeof(module) !== "undefined" && module.exports);
if (!hasModule && typeof(define) === "function" && define.amd){ //AMD
define((window.GreenSockAMDPath ? window.GreenSockAMDPath + "/" : "") + ns.split(".").pop(), [], function() { return cl; });
} else if (hasModule){ //node
if (ns === moduleName) {
module.exports = _exports[moduleName] = cl;
for (i in _exports) {
cl[i] = _exports[i];
}
} else if (_exports[moduleName]) {
_exports[moduleName][n] = cl;
}
}
}
for (i = 0; i < this.sc.length; i++) {
this.sc[i].check();
}
}
};
this.check(true);
},
//used to create Definition instances (which basically registers a class that has dependencies).
_gsDefine = window._gsDefine = function(ns, dependencies, func, global) {
return new Definition(ns, dependencies, func, global);
},
//a quick way to create a class that doesn't have any dependencies. Returns the class, but first registers it in the GreenSock namespace so that other classes can grab it (other classes might be dependent on the class).
_class = gs._class = function(ns, func, global) {
func = func || function() {};
_gsDefine(ns, [], function(){ return func; }, global);
return func;
};
_gsDefine.globals = _globals;
/*
* ----------------------------------------------------------------
* Ease
* ----------------------------------------------------------------
*/
var _baseParams = [0, 0, 1, 1],
_blankArray = [],
Ease = _class("easing.Ease", function(func, extraParams, type, power) {
this._func = func;
this._type = type || 0;
this._power = power || 0;
this._params = extraParams ? _baseParams.concat(extraParams) : _baseParams;
}, true),
_easeMap = Ease.map = {},
_easeReg = Ease.register = function(ease, names, types, create) {
var na = names.split(","),
i = na.length,
ta = (types || "easeIn,easeOut,easeInOut").split(","),
e, name, j, type;
while (--i > -1) {
name = na[i];
e = create ? _class("easing."+name, null, true) : gs.easing[name] || {};
j = ta.length;
while (--j > -1) {
type = ta[j];
_easeMap[name + "." + type] = _easeMap[type + name] = e[type] = ease.getRatio ? ease : ease[type] || new ease();
}
}
};
p = Ease.prototype;
p._calcEnd = false;
p.getRatio = function(p) {
if (this._func) {
this._params[0] = p;
return this._func.apply(null, this._params);
}
var t = this._type,
pw = this._power,
r = (t === 1) ? 1 - p : (t === 2) ? p : (p < 0.5) ? p * 2 : (1 - p) * 2;
if (pw === 1) {
r *= r;
} else if (pw === 2) {
r *= r * r;
} else if (pw === 3) {
r *= r * r * r;
} else if (pw === 4) {
r *= r * r * r * r;
}
return (t === 1) ? 1 - r : (t === 2) ? r : (p < 0.5) ? r / 2 : 1 - (r / 2);
};
//create all the standard eases like Linear, Quad, Cubic, Quart, Quint, Strong, Power0, Power1, Power2, Power3, and Power4 (each with easeIn, easeOut, and easeInOut)
a = ["Linear","Quad","Cubic","Quart","Quint,Strong"];
i = a.length;
while (--i > -1) {
p = a[i]+",Power"+i;
_easeReg(new Ease(null,null,1,i), p, "easeOut", true);
_easeReg(new Ease(null,null,2,i), p, "easeIn" + ((i === 0) ? ",easeNone" : ""));
_easeReg(new Ease(null,null,3,i), p, "easeInOut");
}
_easeMap.linear = gs.easing.Linear.easeIn;
_easeMap.swing = gs.easing.Quad.easeInOut; //for jQuery folks
/*
* ----------------------------------------------------------------
* EventDispatcher
* ----------------------------------------------------------------
*/
var EventDispatcher = _class("events.EventDispatcher", function(target) {
this._listeners = {};
this._eventTarget = target || this;
});
p = EventDispatcher.prototype;
p.addEventListener = function(type, callback, scope, useParam, priority) {
priority = priority || 0;
var list = this._listeners[type],
index = 0,
listener, i;
if (this === _ticker && !_tickerActive) {
_ticker.wake();
}
if (list == null) {
this._listeners[type] = list = [];
}
i = list.length;
while (--i > -1) {
listener = list[i];
if (listener.c === callback && listener.s === scope) {
list.splice(i, 1);
} else if (index === 0 && listener.pr < priority) {
index = i + 1;
}
}
list.splice(index, 0, {c:callback, s:scope, up:useParam, pr:priority});
};
p.removeEventListener = function(type, callback) {
var list = this._listeners[type], i;
if (list) {
i = list.length;
while (--i > -1) {
if (list[i].c === callback) {
list.splice(i, 1);
return;
}
}
}
};
p.dispatchEvent = function(type) {
var list = this._listeners[type],
i, t, listener;
if (list) {
i = list.length;
if (i > 1) {
list = list.slice(0); //in case addEventListener() is called from within a listener/callback (otherwise the index could change, resulting in a skip)
}
t = this._eventTarget;
while (--i > -1) {
listener = list[i];
if (listener) {
if (listener.up) {
listener.c.call(listener.s || t, {type:type, target:t});
} else {
listener.c.call(listener.s || t);
}
}
}
}
};
/*
* ----------------------------------------------------------------
* Ticker
* ----------------------------------------------------------------
*/
var _reqAnimFrame = window.requestAnimationFrame,
_cancelAnimFrame = window.cancelAnimationFrame,
_getTime = Date.now || function() {return new Date().getTime();},
_lastUpdate = _getTime();
//now try to determine the requestAnimationFrame and cancelAnimationFrame functions and if none are found, we'll use a setTimeout()/clearTimeout() polyfill.
a = ["ms","moz","webkit","o"];
i = a.length;
while (--i > -1 && !_reqAnimFrame) {
_reqAnimFrame = window[a[i] + "RequestAnimationFrame"];
_cancelAnimFrame = window[a[i] + "CancelAnimationFrame"] || window[a[i] + "CancelRequestAnimationFrame"];
}
_class("Ticker", function(fps, useRAF) {
var _self = this,
_startTime = _getTime(),
_useRAF = (useRAF !== false && _reqAnimFrame) ? "auto" : false,
_lagThreshold = 500,
_adjustedLag = 33,
_tickWord = "tick", //helps reduce gc burden
_fps, _req, _id, _gap, _nextTime,
_tick = function(manual) {
var elapsed = _getTime() - _lastUpdate,
overlap, dispatch;
if (elapsed > _lagThreshold) {
_startTime += elapsed - _adjustedLag;
}
_lastUpdate += elapsed;
_self.time = (_lastUpdate - _startTime) / 1000;
overlap = _self.time - _nextTime;
if (!_fps || overlap > 0 || manual === true) {
_self.frame++;
_nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);
dispatch = true;
}
if (manual !== true) { //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
_id = _req(_tick);
}
if (dispatch) {
_self.dispatchEvent(_tickWord);
}
};
EventDispatcher.call(_self);
_self.time = _self.frame = 0;
_self.tick = function() {
_tick(true);
};
_self.lagSmoothing = function(threshold, adjustedLag) {
_lagThreshold = threshold || (1 / _tinyNum); //zero should be interpreted as basically unlimited
_adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);
};
_self.sleep = function() {
if (_id == null) {
return;
}
if (!_useRAF || !_cancelAnimFrame) {
clearTimeout(_id);
} else {
_cancelAnimFrame(_id);
}
_req = _emptyFunc;
_id = null;
if (_self === _ticker) {
_tickerActive = false;
}
};
_self.wake = function(seamless) {
if (_id !== null) {
_self.sleep();
} else if (seamless) {
_startTime += -_lastUpdate + (_lastUpdate = _getTime());
} else if (_self.frame > 10) { //don't trigger lagSmoothing if we're just waking up, and make sure that at least 10 frames have elapsed because of the iOS bug that we work around below with the 1.5-second setTimout().
_lastUpdate = _getTime() - _lagThreshold + 5;
}
_req = (_fps === 0) ? _emptyFunc : (!_useRAF || !_reqAnimFrame) ? function(f) { return setTimeout(f, ((_nextTime - _self.time) * 1000 + 1) | 0); } : _reqAnimFrame;
if (_self === _ticker) {
_tickerActive = true;
}
_tick(2);
};
_self.fps = function(value) {
if (!arguments.length) {
return _fps;
}
_fps = value;
_gap = 1 / (_fps || 60);
_nextTime = this.time + _gap;
_self.wake();
};
_self.useRAF = function(value) {
if (!arguments.length) {
return _useRAF;
}
_self.sleep();
_useRAF = value;
_self.fps(_fps);
};
_self.fps(fps);
//a bug in iOS 6 Safari occasionally prevents the requestAnimationFrame from working initially, so we use a 1.5-second timeout that automatically falls back to setTimeout() if it senses this condition.
setTimeout(function() {
if (_useRAF === "auto" && _self.frame < 5 && _doc.visibilityState !== "hidden") {
_self.useRAF(false);
}
}, 1500);
});
p = gs.Ticker.prototype = new gs.events.EventDispatcher();
p.constructor = gs.Ticker;
/*
* ----------------------------------------------------------------
* Animation
* ----------------------------------------------------------------
*/
var Animation = _class("core.Animation", function(duration, vars) {
this.vars = vars = vars || {};
this._duration = this._totalDuration = duration || 0;
this._delay = Number(vars.delay) || 0;
this._timeScale = 1;
this._active = (vars.immediateRender === true);
this.data = vars.data;
this._reversed = (vars.reversed === true);
if (!_rootTimeline) {
return;
}
if (!_tickerActive) { //some browsers (like iOS 6 Safari) shut down JavaScript execution when the tab is disabled and they [occasionally] neglect to start up requestAnimationFrame again when returning - this code ensures that the engine starts up again properly.
_ticker.wake();
}
var tl = this.vars.useFrames ? _rootFramesTimeline : _rootTimeline;
tl.add(this, tl._time);
if (this.vars.paused) {
this.paused(true);
}
});
_ticker = Animation.ticker = new gs.Ticker();
p = Animation.prototype;
p._dirty = p._gc = p._initted = p._paused = false;
p._totalTime = p._time = 0;
p._rawPrevTime = -1;
p._next = p._last = p._onUpdate = p._timeline = p.timeline = null;
p._paused = false;
//some browsers (like iOS) occasionally drop the requestAnimationFrame event when the user switches to a different tab and then comes back again, so we use a 2-second setTimeout() to sense if/when that condition occurs and then wake() the ticker.
var _checkTimeout = function() {
if (_tickerActive && _getTime() - _lastUpdate > 2000) {
_ticker.wake();
}
setTimeout(_checkTimeout, 2000);
};
_checkTimeout();
p.play = function(from, suppressEvents) {
if (from != null) {
this.seek(from, suppressEvents);
}
return this.reversed(false).paused(false);
};
p.pause = function(atTime, suppressEvents) {
if (atTime != null) {
this.seek(atTime, suppressEvents);
}
return this.paused(true);
};
p.resume = function(from, suppressEvents) {
if (from != null) {
this.seek(from, suppressEvents);
}
return this.paused(false);
};
p.seek = function(time, suppressEvents) {
return this.totalTime(Number(time), suppressEvents !== false);
};
p.restart = function(includeDelay, suppressEvents) {
return this.reversed(false).paused(false).totalTime(includeDelay ? -this._delay : 0, (suppressEvents !== false), true);
};
p.reverse = function(from, suppressEvents) {
if (from != null) {
this.seek((from || this.totalDuration()), suppressEvents);
}
return this.reversed(true).paused(false);
};
p.render = function(time, suppressEvents, force) {
//stub - we override this method in subclasses.
};
p.invalidate = function() {
this._time = this._totalTime = 0;
this._initted = this._gc = false;
this._rawPrevTime = -1;
if (this._gc || !this.timeline) {
this._enabled(true);
}
return this;
};
p.isActive = function() {
var tl = this._timeline, //the 2 root timelines won't have a _timeline; they're always active.
startTime = this._startTime,
rawTime;
return (!tl || (!this._gc && !this._paused && tl.isActive() && (rawTime = tl.rawTime(true)) >= startTime && rawTime < startTime + this.totalDuration() / this._timeScale));
};
p._enabled = function (enabled, ignoreTimeline) {
if (!_tickerActive) {
_ticker.wake();
}
this._gc = !enabled;
this._active = this.isActive();
if (ignoreTimeline !== true) {
if (enabled && !this.timeline) {
this._timeline.add(this, this._startTime - this._delay);
} else if (!enabled && this.timeline) {
this._timeline._remove(this, true);
}
}
return false;
};
p._kill = function(vars, target) {
return this._enabled(false, false);
};
p.kill = function(vars, target) {
this._kill(vars, target);
return this;
};
p._uncache = function(includeSelf) {
var tween = includeSelf ? this : this.timeline;
while (tween) {
tween._dirty = true;
tween = tween.timeline;
}
return this;
};
p._swapSelfInParams = function(params) {
var i = params.length,
copy = params.concat();
while (--i > -1) {
if (params[i] === "{self}") {
copy[i] = this;
}
}
return copy;
};
p._callback = function(type) {
var v = this.vars,
callback = v[type],
params = v[type + "Params"],
scope = v[type + "Scope"] || v.callbackScope || this,
l = params ? params.length : 0;
switch (l) { //speed optimization; call() is faster than apply() so use it when there are only a few parameters (which is by far most common). Previously we simply did var v = this.vars; v[type].apply(v[type + "Scope"] || v.callbackScope || this, v[type + "Params"] || _blankArray);
case 0: callback.call(scope); break;
case 1: callback.call(scope, params[0]); break;
case 2: callback.call(scope, params[0], params[1]); break;
default: callback.apply(scope, params);
}
};
//----Animation getters/setters --------------------------------------------------------
p.eventCallback = function(type, callback, params, scope) {
if ((type || "").substr(0,2) === "on") {
var v = this.vars;
if (arguments.length === 1) {
return v[type];
}
if (callback == null) {
delete v[type];
} else {
v[type] = callback;
v[type + "Params"] = (_isArray(params) && params.join("").indexOf("{self}") !== -1) ? this._swapSelfInParams(params) : params;
v[type + "Scope"] = scope;
}
if (type === "onUpdate") {
this._onUpdate = callback;
}
}
return this;
};
p.delay = function(value) {
if (!arguments.length) {
return this._delay;
}
if (this._timeline.smoothChildTiming) {
this.startTime( this._startTime + value - this._delay );
}
this._delay = value;
return this;
};
p.duration = function(value) {
if (!arguments.length) {
this._dirty = false;
return this._duration;
}
this._duration = this._totalDuration = value;
this._uncache(true); //true in case it's a TweenMax or TimelineMax that has a repeat - we'll need to refresh the totalDuration.
if (this._timeline.smoothChildTiming) if (this._time > 0) if (this._time < this._duration) if (value !== 0) {
this.totalTime(this._totalTime * (value / this._duration), true);
}
return this;
};
p.totalDuration = function(value) {
this._dirty = false;
return (!arguments.length) ? this._totalDuration : this.duration(value);
};
p.time = function(value, suppressEvents) {
if (!arguments.length) {
return this._time;
}
if (this._dirty) {
this.totalDuration();
}
return this.totalTime((value > this._duration) ? this._duration : value, suppressEvents);
};
p.totalTime = function(time, suppressEvents, uncapped) {
if (!_tickerActive) {
_ticker.wake();
}
if (!arguments.length) {
return this._totalTime;
}
if (this._timeline) {
if (time < 0 && !uncapped) {
time += this.totalDuration();
}
if (this._timeline.smoothChildTiming) {
if (this._dirty) {
this.totalDuration();
}
var totalDuration = this._totalDuration,
tl = this._timeline;
if (time > totalDuration && !uncapped) {
time = totalDuration;
}
this._startTime = (this._paused ? this._pauseTime : tl._time) - ((!this._reversed ? time : totalDuration - time) / this._timeScale);
if (!tl._dirty) { //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.
this._uncache(false);
}
//in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The startTime of that child would get pushed out, but one of the ancestors may have completed.
if (tl._timeline) {
while (tl._timeline) {
if (tl._timeline._time !== (tl._startTime + tl._totalTime) / tl._timeScale) {
tl.totalTime(tl._totalTime, true);
}
tl = tl._timeline;
}
}
}
if (this._gc) {
this._enabled(true, false);
}
if (this._totalTime !== time || this._duration === 0) {
if (_lazyTweens.length) {
_lazyRender();
}
this.render(time, suppressEvents, false);
if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.
_lazyRender();
}
}
}
return this;
};
p.progress = p.totalProgress = function(value, suppressEvents) {
var duration = this.duration();
return (!arguments.length) ? (duration ? this._time / duration : this.ratio) : this.totalTime(duration * value, suppressEvents);
};
p.startTime = function(value) {
if (!arguments.length) {
return this._startTime;
}
if (value !== this._startTime) {
this._startTime = value;
if (this.timeline) if (this.timeline._sortChildren) {
this.timeline.add(this, value - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct.
}
}
return this;
};
p.endTime = function(includeRepeats) {
return this._startTime + ((includeRepeats != false) ? this.totalDuration() : this.duration()) / this._timeScale;
};
p.timeScale = function(value) {
if (!arguments.length) {
return this._timeScale;
}
value = value || _tinyNum; //can't allow zero because it'll throw the math off
if (this._timeline && this._timeline.smoothChildTiming) {
var pauseTime = this._pauseTime,
t = (pauseTime || pauseTime === 0) ? pauseTime : this._timeline.totalTime();
this._startTime = t - ((t - this._startTime) * this._timeScale / value);
}
this._timeScale = value;
return this._uncache(false);
};
p.reversed = function(value) {
if (!arguments.length) {
return this._reversed;
}
if (value != this._reversed) {
this._reversed = value;
this.totalTime(((this._timeline && !this._timeline.smoothChildTiming) ? this.totalDuration() - this._totalTime : this._totalTime), true);
}
return this;
};
p.paused = function(value) {
if (!arguments.length) {
return this._paused;
}
var tl = this._timeline,
raw, elapsed;
if (value != this._paused) if (tl) {
if (!_tickerActive && !value) {
_ticker.wake();
}
raw = tl.rawTime();
elapsed = raw - this._pauseTime;
if (!value && tl.smoothChildTiming) {
this._startTime += elapsed;
this._uncache(false);
}
this._pauseTime = value ? raw : null;
this._paused = value;
this._active = this.isActive();
if (!value && elapsed !== 0 && this._initted && this.duration()) {
raw = tl.smoothChildTiming ? this._totalTime : (raw - this._startTime) / this._timeScale;
this.render(raw, (raw === this._totalTime), true); //in case the target's properties changed via some other tween or manual update by the user, we should force a render.
}
}
if (this._gc && !value) {
this._enabled(true, false);
}
return this;
};
/*
* ----------------------------------------------------------------
* SimpleTimeline
* ----------------------------------------------------------------
*/
var SimpleTimeline = _class("core.SimpleTimeline", function(vars) {
Animation.call(this, 0, vars);
this.autoRemoveChildren = this.smoothChildTiming = true;
});
p = SimpleTimeline.prototype = new Animation();
p.constructor = SimpleTimeline;
p.kill()._gc = false;
p._first = p._last = p._recent = null;
p._sortChildren = false;
p.add = p.insert = function(child, position, align, stagger) {
var prevTween, st;
child._startTime = Number(position || 0) + child._delay;
if (child._paused) if (this !== child._timeline) { //we only adjust the _pauseTime if it wasn't in this timeline already. Remember, sometimes a tween will be inserted again into the same timeline when its startTime is changed so that the tweens in the TimelineLite/Max are re-ordered properly in the linked list (so everything renders in the proper order).
child._pauseTime = child._startTime + ((this.rawTime() - child._startTime) / child._timeScale);
}
if (child.timeline) {
child.timeline._remove(child, true); //removes from existing timeline so that it can be properly added to this one.
}
child.timeline = child._timeline = this;
if (child._gc) {
child._enabled(true, true);
}
prevTween = this._last;
if (this._sortChildren) {
st = child._startTime;
while (prevTween && prevTween._startTime > st) {
prevTween = prevTween._prev;
}
}
if (prevTween) {
child._next = prevTween._next;
prevTween._next = child;
} else {
child._next = this._first;
this._first = child;
}
if (child._next) {
child._next._prev = child;
} else {
this._last = child;
}
child._prev = prevTween;
this._recent = child;
if (this._timeline) {
this._uncache(true);
}
return this;
};
p._remove = function(tween, skipDisable) {
if (tween.timeline === this) {
if (!skipDisable) {
tween._enabled(false, true);
}
if (tween._prev) {
tween._prev._next = tween._next;
} else if (this._first === tween) {
this._first = tween._next;
}
if (tween._next) {
tween._next._prev = tween._prev;
} else if (this._last === tween) {
this._last = tween._prev;
}
tween._next = tween._prev = tween.timeline = null;
if (tween === this._recent) {
this._recent = this._last;
}
if (this._timeline) {
this._uncache(true);
}
}
return this;
};
p.render = function(time, suppressEvents, force) {
var tween = this._first,
next;
this._totalTime = this._time = this._rawPrevTime = time;
while (tween) {
next = tween._next; //record it here because the value could change after rendering...
if (tween._active || (time >= tween._startTime && !tween._paused)) {
if (!tween._reversed) {
tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
} else {
tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
}
}
tween = next;
}
};
p.rawTime = function() {
if (!_tickerActive) {
_ticker.wake();
}
return this._totalTime;
};
/*
* ----------------------------------------------------------------
* TweenLite
* ----------------------------------------------------------------
*/
var TweenLite = _class("TweenLite", function(target, duration, vars) {
Animation.call(this, duration, vars);
this.render = TweenLite.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method)
if (target == null) {
throw "Cannot tween a null target.";
}
this.target = target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;
var isSelector = (target.jquery || (target.length && target !== window && target[0] && (target[0] === window || (target[0].nodeType && target[0].style && !target.nodeType)))),
overwrite = this.vars.overwrite,
i, targ, targets;
this._overwrite = overwrite = (overwrite == null) ? _overwriteLookup[TweenLite.defaultOverwrite] : (typeof(overwrite) === "number") ? overwrite >> 0 : _overwriteLookup[overwrite];
if ((isSelector || target instanceof Array || (target.push && _isArray(target))) && typeof(target[0]) !== "number") {
this._targets = targets = _slice(target); //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll()
this._propLookup = [];
this._siblings = [];
for (i = 0; i < targets.length; i++) {
targ = targets[i];
if (!targ) {
targets.splice(i--, 1);
continue;
} else if (typeof(targ) === "string") {
targ = targets[i--] = TweenLite.selector(targ); //in case it's an array of strings
if (typeof(targ) === "string") {
targets.splice(i+1, 1); //to avoid an endless loop (can't imagine why the selector would return a string, but just in case)
}
continue;
} else if (targ.length && targ !== window && targ[0] && (targ[0] === window || (targ[0].nodeType && targ[0].style && !targ.nodeType))) { //in case the user is passing in an array of selector objects (like jQuery objects), we need to check one more level and pull things out if necessary. Also note that <select> elements pass all the criteria regarding length and the first child having style, so we must also check to ensure the target isn't an HTML node itself.
targets.splice(i--, 1);
this._targets = targets = targets.concat(_slice(targ));
continue;
}
this._siblings[i] = _register(targ, this, false);
if (overwrite === 1) if (this._siblings[i].length > 1) {
_applyOverwrite(targ, this, null, 1, this._siblings[i]);
}
}
} else {
this._propLookup = {};
this._siblings = _register(target, this, false);
if (overwrite === 1) if (this._siblings.length > 1) {
_applyOverwrite(target, this, null, 1, this._siblings);
}
}
if (this.vars.immediateRender || (duration === 0 && this._delay === 0 && this.vars.immediateRender !== false)) {
this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
this.render(Math.min(0, -this._delay)); //in case delay is negative
}
}, true),
_isSelector = function(v) {
return (v && v.length && v !== window && v[0] && (v[0] === window || (v[0].nodeType && v[0].style && !v.nodeType))); //we cannot check "nodeType" if the target is window from within an iframe, otherwise it will trigger a security error in some browsers like Firefox.
},
_autoCSS = function(vars, target) {
var css = {},
p;
for (p in vars) {
if (!_reservedProps[p] && (!(p in target) || p === "transform" || p === "x" || p === "y" || p === "width" || p === "height" || p === "className" || p === "border") && (!_plugins[p] || (_plugins[p] && _plugins[p]._autoCSS))) { //note: <img> elements contain read-only "x" and "y" properties. We should also prioritize editing css width/height rather than the element's properties.
css[p] = vars[p];
delete vars[p];
}
}
vars.css = css;
};
p = TweenLite.prototype = new Animation();
p.constructor = TweenLite;
p.kill()._gc = false;
//----TweenLite defaults, overwrite management, and root updates ----------------------------------------------------
p.ratio = 0;
p._firstPT = p._targets = p._overwrittenProps = p._startAt = null;
p._notifyPluginsOfEnabled = p._lazy = false;
TweenLite.version = "1.19.1";
TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1);
TweenLite.defaultOverwrite = "auto";
TweenLite.ticker = _ticker;
TweenLite.autoSleep = 120;
TweenLite.lagSmoothing = function(threshold, adjustedLag) {
_ticker.lagSmoothing(threshold, adjustedLag);
};
TweenLite.selector = window.$ || window.jQuery || function(e) {
var selector = window.$ || window.jQuery;
if (selector) {
TweenLite.selector = selector;
return selector(e);
}
return (typeof(_doc) === "undefined") ? e : (_doc.querySelectorAll ? _doc.querySelectorAll(e) : _doc.getElementById((e.charAt(0) === "#") ? e.substr(1) : e));
};
var _lazyTweens = [],
_lazyLookup = {},
_numbersExp = /(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig,
//_nonNumbersExp = /(?:([\-+](?!(\d|=)))|[^\d\-+=e]|(e(?![\-+][\d])))+/ig,
_setRatio = function(v) {
var pt = this._firstPT,
min = 0.000001,
val;
while (pt) {
val = !pt.blob ? pt.c * v + pt.s : (v === 1) ? this.end : v ? this.join("") : this.start;
if (pt.m) {
val = pt.m(val, this._target || pt.t);
} else if (val < min) if (val > -min && !pt.blob) { //prevents issues with converting very small numbers to strings in the browser
val = 0;
}
if (!pt.f) {
pt.t[pt.p] = val;
} else if (pt.fp) {
pt.t[pt.p](pt.fp, val);
} else {
pt.t[pt.p](val);
}
pt = pt._next;
}
},
//compares two strings (start/end), finds the numbers that are different and spits back an array representing the whole value but with the changing values isolated as elements. For example, "rgb(0,0,0)" and "rgb(100,50,0)" would become ["rgb(", 0, ",", 50, ",0)"]. Notice it merges the parts that are identical (performance optimization). The array also has a linked list of PropTweens attached starting with _firstPT that contain the tweening data (t, p, s, c, f, etc.). It also stores the starting value as a "start" property so that we can revert to it if/when necessary, like when a tween rewinds fully. If the quantity of numbers differs between the start and end, it will always prioritize the end value(s). The pt parameter is optional - it's for a PropTween that will be appended to the end of the linked list and is typically for actually setting the value after all of the elements have been updated (with array.join("")).
_blobDif = function(start, end, filter, pt) {
var a = [],
charIndex = 0,
s = "",
color = 0,
startNums, endNums, num, i, l, nonNumbers, currentNum;
a.start = start;
a.end = end;
start = a[0] = start + ""; //ensure values are strings
end = a[1] = end + "";
if (filter) {
filter(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.
start = a[0];
end = a[1];
}
a.length = 0;
startNums = start.match(_numbersExp) || [];
endNums = end.match(_numbersExp) || [];
if (pt) {
pt._next = null;
pt.blob = 1;
a._firstPT = a._applyPT = pt; //apply last in the linked list (which means inserting it first)
}
l = endNums.length;
for (i = 0; i < l; i++) {
currentNum = endNums[i];
nonNumbers = end.substr(charIndex, end.indexOf(currentNum, charIndex)-charIndex);
s += (nonNumbers || !i) ? nonNumbers : ","; //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
charIndex += nonNumbers.length;
if (color) { //sense rgba() values and round them.
color = (color + 1) % 5;
} else if (nonNumbers.substr(-5) === "rgba(") {
color = 1;
}
if (currentNum === startNums[i] || startNums.length <= i) {
s += currentNum;
} else {
if (s) {
a.push(s);
s = "";
}
num = parseFloat(startNums[i]);
a.push(num);
a._firstPT = {_next: a._firstPT, t:a, p: a.length-1, s:num, c:((currentNum.charAt(1) === "=") ? parseInt(currentNum.charAt(0) + "1", 10) * parseFloat(currentNum.substr(2)) : (parseFloat(currentNum) - num)) || 0, f:0, m:(color && color < 4) ? Math.round : 0};
//note: we don't set _prev because we'll never need to remove individual PropTweens from this list.
}
charIndex += currentNum.length;
}
s += end.substr(charIndex);
if (s) {
a.push(s);
}
a.setRatio = _setRatio;
return a;
},
//note: "funcParam" is only necessary for function-based getters/setters that require an extra parameter like getAttribute("width") and setAttribute("width", value). In this example, funcParam would be "width". Used by AttrPlugin for example.
_addPropTween = function(target, prop, start, end, overwriteProp, mod, funcParam, stringFilter, index) {
if (typeof(end) === "function") {
end = end(index || 0, target);
}
var type = typeof(target[prop]),
getterName = (type !== "function") ? "" : ((prop.indexOf("set") || typeof(target["get" + prop.substr(3)]) !== "function") ? prop : "get" + prop.substr(3)),
s = (start !== "get") ? start : !getterName ? target[prop] : funcParam ? target[getterName](funcParam) : target[getterName](),
isRelative = (typeof(end) === "string" && end.charAt(1) === "="),
pt = {t:target, p:prop, s:s, f:(type === "function"), pg:0, n:overwriteProp || prop, m:(!mod ? 0 : (typeof(mod) === "function") ? mod : Math.round), pr:0, c:isRelative ? parseInt(end.charAt(0) + "1", 10) * parseFloat(end.substr(2)) : (parseFloat(end) - s) || 0},
blob;
if (typeof(s) !== "number" || (typeof(end) !== "number" && !isRelative)) {
if (funcParam || isNaN(s) || (!isRelative && isNaN(end)) || typeof(s) === "boolean" || typeof(end) === "boolean") {
//a blob (string that has multiple numbers in it)
pt.fp = funcParam;
blob = _blobDif(s, (isRelative ? pt.s + pt.c : end), stringFilter || TweenLite.defaultStringFilter, pt);
pt = {t: blob, p: "setRatio", s: 0, c: 1, f: 2, pg: 0, n: overwriteProp || prop, pr: 0, m: 0}; //"2" indicates it's a Blob property tween. Needed for RoundPropsPlugin for example.
} else {
pt.s = parseFloat(s);
if (!isRelative) {
pt.c = (parseFloat(end) - pt.s) || 0;
}
}
}
if (pt.c) { //only add it to the linked list if there's a change.
if ((pt._next = this._firstPT)) {
pt._next._prev = pt;
}
this._firstPT = pt;
return pt;
}
},
_internals = TweenLite._internals = {isArray:_isArray, isSelector:_isSelector, lazyTweens:_lazyTweens, blobDif:_blobDif}, //gives us a way to expose certain private values to other GreenSock classes without contaminating tha main TweenLite object.
_plugins = TweenLite._plugins = {},
_tweenLookup = _internals.tweenLookup = {},
_tweenLookupNum = 0,
_reservedProps = _internals.reservedProps = {ease:1, delay:1, overwrite:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, runBackwards:1, startAt:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, autoCSS:1, lazy:1, onOverwrite:1, callbackScope:1, stringFilter:1, id:1},
_overwriteLookup = {none:0, all:1, auto:2, concurrent:3, allOnStart:4, preexisting:5, "true":1, "false":0},
_rootFramesTimeline = Animation._rootFramesTimeline = new SimpleTimeline(),
_rootTimeline = Animation._rootTimeline = new SimpleTimeline(),
_nextGCFrame = 30,
_lazyRender = _internals.lazyRender = function() {
var i = _lazyTweens.length,
tween;
_lazyLookup = {};
while (--i > -1) {
tween = _lazyTweens[i];
if (tween && tween._lazy !== false) {
tween.render(tween._lazy[0], tween._lazy[1], true);
tween._lazy = false;
}
}
_lazyTweens.length = 0;
};
_rootTimeline._startTime = _ticker.time;
_rootFramesTimeline._startTime = _ticker.frame;
_rootTimeline._active = _rootFramesTimeline._active = true;
setTimeout(_lazyRender, 1); //on some mobile devices, there isn't a "tick" before code runs which means any lazy renders wouldn't run before the next official "tick".
Animation._updateRoot = TweenLite.render = function() {
var i, a, p;
if (_lazyTweens.length) { //if code is run outside of the requestAnimationFrame loop, there may be tweens queued AFTER the engine refreshed, so we need to ensure any pending renders occur before we refresh again.
_lazyRender();
}
_rootTimeline.render((_ticker.time - _rootTimeline._startTime) * _rootTimeline._timeScale, false, false);
_rootFramesTimeline.render((_ticker.frame - _rootFramesTimeline._startTime) * _rootFramesTimeline._timeScale, false, false);
if (_lazyTweens.length) {
_lazyRender();
}
if (_ticker.frame >= _nextGCFrame) { //dump garbage every 120 frames or whatever the user sets TweenLite.autoSleep to
_nextGCFrame = _ticker.frame + (parseInt(TweenLite.autoSleep, 10) || 120);
for (p in _tweenLookup) {
a = _tweenLookup[p].tweens;
i = a.length;
while (--i > -1) {
if (a[i]._gc) {
a.splice(i, 1);
}
}
if (a.length === 0) {
delete _tweenLookup[p];
}
}
//if there are no more tweens in the root timelines, or if they're all paused, make the _timer sleep to reduce load on the CPU slightly
p = _rootTimeline._first;
if (!p || p._paused) if (TweenLite.autoSleep && !_rootFramesTimeline._first && _ticker._listeners.tick.length === 1) {
while (p && p._paused) {
p = p._next;
}
if (!p) {
_ticker.sleep();
}
}
}
};
_ticker.addEventListener("tick", Animation._updateRoot);
var _register = function(target, tween, scrub) {
var id = target._gsTweenID, a, i;
if (!_tweenLookup[id || (target._gsTweenID = id = "t" + (_tweenLookupNum++))]) {
_tweenLookup[id] = {target:target, tweens:[]};
}
if (tween) {
a = _tweenLookup[id].tweens;
a[(i = a.length)] = tween;
if (scrub) {
while (--i > -1) {
if (a[i] === tween) {
a.splice(i, 1);
}
}
}
}
return _tweenLookup[id].tweens;
},
_onOverwrite = function(overwrittenTween, overwritingTween, target, killedProps) {
var func = overwrittenTween.vars.onOverwrite, r1, r2;
if (func) {
r1 = func(overwrittenTween, overwritingTween, target, killedProps);
}
func = TweenLite.onOverwrite;
if (func) {
r2 = func(overwrittenTween, overwritingTween, target, killedProps);
}
return (r1 !== false && r2 !== false);
},
_applyOverwrite = function(target, tween, props, mode, siblings) {
var i, changed, curTween, l;
if (mode === 1 || mode >= 4) {
l = siblings.length;
for (i = 0; i < l; i++) {
if ((curTween = siblings[i]) !== tween) {
if (!curTween._gc) {
if (curTween._kill(null, target, tween)) {
changed = true;
}
}
} else if (mode === 5) {
break;
}
}
return changed;
}
//NOTE: Add 0.0000000001 to overcome floating point errors that can cause the startTime to be VERY slightly off (when a tween's time() is set for example)
var startTime = tween._startTime + _tinyNum,
overlaps = [],
oCount = 0,
zeroDur = (tween._duration === 0),
globalStart;
i = siblings.length;
while (--i > -1) {
if ((curTween = siblings[i]) === tween || curTween._gc || curTween._paused) {
//ignore
} else if (curTween._timeline !== tween._timeline) {
globalStart = globalStart || _checkOverlap(tween, 0, zeroDur);
if (_checkOverlap(curTween, globalStart, zeroDur) === 0) {
overlaps[oCount++] = curTween;
}
} else if (curTween._startTime <= startTime) if (curTween._startTime + curTween.totalDuration() / curTween._timeScale > startTime) if (!((zeroDur || !curTween._initted) && startTime - curTween._startTime <= 0.0000000002)) {
overlaps[oCount++] = curTween;
}
}
i = oCount;
while (--i > -1) {
curTween = overlaps[i];
if (mode === 2) if (curTween._kill(props, target, tween)) {
changed = true;
}
if (mode !== 2 || (!curTween._firstPT && curTween._initted)) {
if (mode !== 2 && !_onOverwrite(curTween, tween)) {
continue;
}
if (curTween._enabled(false, false)) { //if all property tweens have been overwritten, kill the tween.
changed = true;
}
}
}
return changed;
},
_checkOverlap = function(tween, reference, zeroDur) {
var tl = tween._timeline,
ts = tl._timeScale,
t = tween._startTime;
while (tl._timeline) {
t += tl._startTime;
ts *= tl._timeScale;
if (tl._paused) {
return -100;
}
tl = tl._timeline;
}
t /= ts;
return (t > reference) ? t - reference : ((zeroDur && t === reference) || (!tween._initted && t - reference < 2 * _tinyNum)) ? _tinyNum : ((t += tween.totalDuration() / tween._timeScale / ts) > reference + _tinyNum) ? 0 : t - reference - _tinyNum;
};
//---- TweenLite instance methods -----------------------------------------------------------------------------
p._init = function() {
var v = this.vars,
op = this._overwrittenProps,
dur = this._duration,
immediate = !!v.immediateRender,
ease = v.ease,
i, initPlugins, pt, p, startVars, l;
if (v.startAt) {
if (this._startAt) {
this._startAt.render(-1, true); //if we've run a startAt previously (when the tween instantiated), we should revert it so that the values re-instantiate correctly particularly for relative tweens. Without this, a TweenLite.fromTo(obj, 1, {x:"+=100"}, {x:"-=100"}), for example, would actually jump to +=200 because the startAt would run twice, doubling the relative change.
this._startAt.kill();
}
startVars = {};
for (p in v.startAt) { //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, 1, from, to).fromTo(e, 1, to, from);
startVars[p] = v.startAt[p];
}
startVars.overwrite = false;
startVars.immediateRender = true;
startVars.lazy = (immediate && v.lazy !== false);
startVars.startAt = startVars.delay = null; //no nesting of startAt objects allowed (otherwise it could cause an infinite loop).
this._startAt = TweenLite.to(this.target, 0, startVars);
if (immediate) {
if (this._time > 0) {
this._startAt = null; //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in TimelineLite/Max instances where immediateRender was false (which is the default in the convenience methods like from()).
} else if (dur !== 0) {
return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a TimelineLite or TimelineMax, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.
}
}
} else if (v.runBackwards && dur !== 0) {
//from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)
if (this._startAt) {
this._startAt.render(-1, true);
this._startAt.kill();
this._startAt = null;
} else {
if (this._time !== 0) { //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0
immediate = false;
}
pt = {};
for (p in v) { //copy props into a new object and skip any reserved props, otherwise onComplete or onUpdate or onStart could fire. We should, however, permit autoCSS to go through.
if (!_reservedProps[p] || p === "autoCSS") {
pt[p] = v[p];
}
}
pt.overwrite = 0;
pt.data = "isFromStart"; //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
pt.lazy = (immediate && v.lazy !== false);
pt.immediateRender = immediate; //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
this._startAt = TweenLite.to(this.target, 0, pt);
if (!immediate) {
this._startAt._init(); //ensures that the initial values are recorded
this._startAt._enabled(false); //no need to have the tween render on the next cycle. Disable it because we'll always manually control the renders of the _startAt tween.
if (this.vars.immediateRender) {
this._startAt = null;
}
} else if (this._time === 0) {
return;
}
}
}
this._ease = ease = (!ease) ? TweenLite.defaultEase : (ease instanceof Ease) ? ease : (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase;
if (v.easeParams instanceof Array && ease.config) {
this._ease = ease.config.apply(ease, v.easeParams);
}
this._easeType = this._ease._type;
this._easePower = this._ease._power;
this._firstPT = null;
if (this._targets) {
l = this._targets.length;
for (i = 0; i < l; i++) {
if ( this._initProps( this._targets[i], (this._propLookup[i] = {}), this._siblings[i], (op ? op[i] : null), i) ) {
initPlugins = true;
}
}
} else {
initPlugins = this._initProps(this.target, this._propLookup, this._siblings, op, 0);
}
if (initPlugins) {
TweenLite._onPluginEvent("_onInitAllProps", this); //reorders the array in order of priority. Uses a static TweenPlugin method in order to minimize file size in TweenLite
}
if (op) if (!this._firstPT) if (typeof(this.target) !== "function") { //if all tweening properties have been overwritten, kill the tween. If the target is a function, it's probably a delayedCall so let it live.
this._enabled(false, false);
}
if (v.runBackwards) {
pt = this._firstPT;
while (pt) {
pt.s += pt.c;
pt.c = -pt.c;
pt = pt._next;
}
}
this._onUpdate = v.onUpdate;
this._initted = true;
};
p._initProps = function(target, propLookup, siblings, overwrittenProps, index) {
var p, i, initPlugins, plugin, pt, v;
if (target == null) {
return false;
}
if (_lazyLookup[target._gsTweenID]) {
_lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)
}
if (!this.vars.css) if (target.style) if (target !== window && target.nodeType) if (_plugins.css) if (this.vars.autoCSS !== false) { //it's so common to use TweenLite/Max to animate the css of DOM elements, we assume that if the target is a DOM element, that's what is intended (a convenience so that users don't have to wrap things in css:{}, although we still recommend it for a slight performance boost and better specificity). Note: we cannot check "nodeType" on the window inside an iframe.
_autoCSS(this.vars, target);
}
for (p in this.vars) {
v = this.vars[p];
if (_reservedProps[p]) {
if (v) if ((v instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !== -1) {
this.vars[p] = v = this._swapSelfInParams(v, this);
}
} else if (_plugins[p] && (plugin = new _plugins[p]())._onInitTween(target, this.vars[p], this, index)) {
//t - target [object]
//p - property [string]
//s - start [number]
//c - change [number]
//f - isFunction [boolean]
//n - name [string]
//pg - isPlugin [boolean]
//pr - priority [number]
//m - mod [function | 0]
this._firstPT = pt = {_next:this._firstPT, t:plugin, p:"setRatio", s:0, c:1, f:1, n:p, pg:1, pr:plugin._priority, m:0};
i = plugin._overwriteProps.length;
while (--i > -1) {
propLookup[plugin._overwriteProps[i]] = this._firstPT;
}
if (plugin._priority || plugin._onInitAllProps) {
initPlugins = true;
}
if (plugin._onDisable || plugin._onEnable) {
this._notifyPluginsOfEnabled = true;
}
if (pt._next) {
pt._next._prev = pt;
}
} else {
propLookup[p] = _addPropTween.call(this, target, p, "get", v, p, 0, null, this.vars.stringFilter, index);
}
}
if (overwrittenProps) if (this._kill(overwrittenProps, target)) { //another tween may have tried to overwrite properties of this tween before init() was called (like if two tweens start at the same time, the one created second will run first)
return this._initProps(target, propLookup, siblings, overwrittenProps, index);
}
if (this._overwrite > 1) if (this._firstPT) if (siblings.length > 1) if (_applyOverwrite(target, this, propLookup, this._overwrite, siblings)) {
this._kill(propLookup, target);
return this._initProps(target, propLookup, siblings, overwrittenProps, index);
}
if (this._firstPT) if ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration)) { //zero duration tweens don't lazy render by default; everything else does.
_lazyLookup[target._gsTweenID] = true;
}
return initPlugins;
};
p.render = function(time, suppressEvents, force) {
var prevTime = this._time,
duration = this._duration,
prevRawPrevTime = this._rawPrevTime,
isComplete, callback, pt, rawPrevTime;
if (time >= duration - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts.
this._totalTime = this._time = duration;
this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1;
if (!this._reversed ) {
isComplete = true;
callback = "onComplete";
force = (force || this._timeline.autoRemoveChildren); //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline.
}
if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate.
time = 0;
}
if (prevRawPrevTime < 0 || (time <= 0 && time >= -0.0000001) || (prevRawPrevTime === _tinyNum && this.data !== "isPause")) if (prevRawPrevTime !== time) { //note: when this.data is "isPause", it's a callback added by addPause() on a timeline that we should not be triggered when LEAVING its exact start time. In other words, tl.addPause(1).play(1) shouldn't pause.
force = true;
if (prevRawPrevTime > _tinyNum) {
callback = "onReverseComplete";
}
}
this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
}
} else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.
this._totalTime = this._time = 0;
this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;
if (prevTime !== 0 || (duration === 0 && prevRawPrevTime > 0)) {
callback = "onReverseComplete";
isComplete = this._reversed;
}
if (time < 0) {
this._active = false;
if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
if (prevRawPrevTime >= 0 && !(prevRawPrevTime === _tinyNum && this.data === "isPause")) {
force = true;
}
this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
}
}
if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
force = true;
}
} else {
this._totalTime = this._time = time;
if (this._easeType) {
var r = time / duration, type = this._easeType, pow = this._easePower;
if (type === 1 || (type === 3 && r >= 0.5)) {
r = 1 - r;
}
if (type === 3) {
r *= 2;
}
if (pow === 1) {
r *= r;
} else if (pow === 2) {
r *= r * r;
} else if (pow === 3) {
r *= r * r * r;
} else if (pow === 4) {
r *= r * r * r * r;
}
if (type === 1) {
this.ratio = 1 - r;
} else if (type === 2) {
this.ratio = r;
} else if (time / duration < 0.5) {
this.ratio = r / 2;
} else {
this.ratio = 1 - (r / 2);
}
} else {
this.ratio = this._ease.getRatio(time / duration);
}
}
if (this._time === prevTime && !force) {
return;
} else if (!this._initted) {
this._init();
if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example.
return;
} else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) {
this._time = this._totalTime = prevTime;
this._rawPrevTime = prevRawPrevTime;
_lazyTweens.push(this);
this._lazy = [time, suppressEvents];
return;
}
//_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently.
if (this._time && !isComplete) {
this.ratio = this._ease.getRatio(this._time / duration);
} else if (isComplete && this._ease._calcEnd) {
this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1);
}
}
if (this._lazy !== false) { //in case a lazy render is pending, we should flush it because the new render is occurring now (imagine a lazy tween instantiating and then immediately the user calls tween.seek(tween.duration()), skipping to the end - the end render would be forced, and then if we didn't flush the lazy render, it'd fire AFTER the seek(), rendering it at the wrong time.
this._lazy = false;
}
if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) {
this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done.
}
if (prevTime === 0) {
if (this._startAt) {
if (time >= 0) {
this._startAt.render(time, suppressEvents, force);
} else if (!callback) {
callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area.
}
}
if (this.vars.onStart) if (this._time !== 0 || duration === 0) if (!suppressEvents) {
this._callback("onStart");
}
}
pt = this._firstPT;
while (pt) {
if (pt.f) {
pt.t[pt.p](pt.c * this.ratio + pt.s);
} else {
pt.t[pt.p] = pt.c * this.ratio + pt.s;
}
pt = pt._next;
}
if (this._onUpdate) {
if (time < 0) if (this._startAt && time !== -0.0001) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
}
if (!suppressEvents) if (this._time !== prevTime || isComplete || force) {
this._callback("onUpdate");
}
}
if (callback) if (!this._gc || force) { //check _gc because there's a chance that kill() could be called in an onUpdate
if (time < 0 && this._startAt && !this._onUpdate && time !== -0.0001) { //-0.0001 is a special value that we use when looping back to the beginning of a repeated TimelineMax, in which case we shouldn't render the _startAt values.
this._startAt.render(time, suppressEvents, force);
}
if (isComplete) {
if (this._timeline.autoRemoveChildren) {
this._enabled(false, false);
}
this._active = false;
}
if (!suppressEvents && this.vars[callback]) {
this._callback(callback);
}
if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless.
this._rawPrevTime = 0;
}
}
};
p._kill = function(vars, target, overwritingTween) {
if (vars === "all") {
vars = null;
}
if (vars == null) if (target == null || target === this.target) {
this._lazy = false;
return this._enabled(false, false);
}
target = (typeof(target) !== "string") ? (target || this._targets || this.target) : TweenLite.selector(target) || target;
var simultaneousOverwrite = (overwritingTween && this._time && overwritingTween._startTime === this._startTime && this._timeline === overwritingTween._timeline),
i, overwrittenProps, p, pt, propLookup, changed, killProps, record, killed;
if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {
i = target.length;
while (--i > -1) {
if (this._kill(vars, target[i], overwritingTween)) {
changed = true;
}
}
} else {
if (this._targets) {
i = this._targets.length;
while (--i > -1) {
if (target === this._targets[i]) {
propLookup = this._propLookup[i] || {};
this._overwrittenProps = this._overwrittenProps || [];
overwrittenProps = this._overwrittenProps[i] = vars ? this._overwrittenProps[i] || {} : "all";
break;
}
}
} else if (target !== this.target) {
return false;
} else {
propLookup = this._propLookup;
overwrittenProps = this._overwrittenProps = vars ? this._overwrittenProps || {} : "all";
}
if (propLookup) {
killProps = vars || propLookup;
record = (vars !== overwrittenProps && overwrittenProps !== "all" && vars !== propLookup && (typeof(vars) !== "object" || !vars._tempKill)); //_tempKill is a super-secret way to delete a particular tweening property but NOT have it remembered as an official overwritten property (like in BezierPlugin)
if (overwritingTween && (TweenLite.onOverwrite || this.vars.onOverwrite)) {
for (p in killProps) {
if (propLookup[p]) {
if (!killed) {
killed = [];
}
killed.push(p);
}
}
if ((killed || !vars) && !_onOverwrite(this, overwritingTween, target, killed)) { //if the onOverwrite returned false, that means the user wants to override the overwriting (cancel it).
return false;
}
}
for (p in killProps) {
if ((pt = propLookup[p])) {
if (simultaneousOverwrite) { //if another tween overwrites this one and they both start at exactly the same time, yet this tween has already rendered once (for example, at 0.001) because it's first in the queue, we should revert the values to where they were at 0 so that the starting values aren't contaminated on the overwriting tween.
if (pt.f) {
pt.t[pt.p](pt.s);
} else {
pt.t[pt.p] = pt.s;
}
changed = true;
}
if (pt.pg && pt.t._kill(killProps)) {
changed = true; //some plugins need to be notified so they can perform cleanup tasks first
}
if (!pt.pg || pt.t._overwriteProps.length === 0) {
if (pt._prev) {
pt._prev._next = pt._next;
} else if (pt === this._firstPT) {
this._firstPT = pt._next;
}
if (pt._next) {
pt._next._prev = pt._prev;
}
pt._next = pt._prev = null;
}
delete propLookup[p];
}
if (record) {
overwrittenProps[p] = 1;
}
}
if (!this._firstPT && this._initted) { //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.
this._enabled(false, false);
}
}
}
return changed;
};
p.invalidate = function() {
if (this._notifyPluginsOfEnabled) {
TweenLite._onPluginEvent("_onDisable", this);
}
this._firstPT = this._overwrittenProps = this._startAt = this._onUpdate = null;
this._notifyPluginsOfEnabled = this._active = this._lazy = false;
this._propLookup = (this._targets) ? {} : [];
Animation.prototype.invalidate.call(this);
if (this.vars.immediateRender) {
this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
this.render(Math.min(0, -this._delay)); //in case delay is negative.
}
return this;
};
p._enabled = function(enabled, ignoreTimeline) {
if (!_tickerActive) {
_ticker.wake();
}
if (enabled && this._gc) {
var targets = this._targets,
i;
if (targets) {
i = targets.length;
while (--i > -1) {
this._siblings[i] = _register(targets[i], this, true);
}
} else {
this._siblings = _register(this.target, this, true);
}
}
Animation.prototype._enabled.call(this, enabled, ignoreTimeline);
if (this._notifyPluginsOfEnabled) if (this._firstPT) {
return TweenLite._onPluginEvent((enabled ? "_onEnable" : "_onDisable"), this);
}
return false;
};
//----TweenLite static methods -----------------------------------------------------
TweenLite.to = function(target, duration, vars) {
return new TweenLite(target, duration, vars);
};
TweenLite.from = function(target, duration, vars) {
vars.runBackwards = true;
vars.immediateRender = (vars.immediateRender != false);
return new TweenLite(target, duration, vars);
};
TweenLite.fromTo = function(target, duration, fromVars, toVars) {
toVars.startAt = fromVars;
toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);
return new TweenLite(target, duration, toVars);
};
TweenLite.delayedCall = function(delay, callback, params, scope, useFrames) {
return new TweenLite(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, callbackScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, immediateRender:false, lazy:false, useFrames:useFrames, overwrite:0});
};
TweenLite.set = function(target, vars) {
return new TweenLite(target, 0, vars);
};
TweenLite.getTweensOf = function(target, onlyActive) {
if (target == null) { return []; }
target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;
var i, a, j, t;
if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {
i = target.length;
a = [];
while (--i > -1) {
a = a.concat(TweenLite.getTweensOf(target[i], onlyActive));
}
i = a.length;
//now get rid of any duplicates (tweens of arrays of objects could cause duplicates)
while (--i > -1) {
t = a[i];
j = i;
while (--j > -1) {
if (t === a[j]) {
a.splice(i, 1);
}
}
}
} else {
a = _register(target).concat();
i = a.length;
while (--i > -1) {
if (a[i]._gc || (onlyActive && !a[i].isActive())) {
a.splice(i, 1);
}
}
}
return a;
};
TweenLite.killTweensOf = TweenLite.killDelayedCallsTo = function(target, onlyActive, vars) {
if (typeof(onlyActive) === "object") {
vars = onlyActive; //for backwards compatibility (before "onlyActive" parameter was inserted)
onlyActive = false;
}
var a = TweenLite.getTweensOf(target, onlyActive),
i = a.length;
while (--i > -1) {
a[i]._kill(vars, target);
}
};
/*
* ----------------------------------------------------------------
* TweenPlugin (could easily be split out as a separate file/class, but included for ease of use (so that people don't need to include another script call before loading plugins which is easy to forget)
* ----------------------------------------------------------------
*/
var TweenPlugin = _class("plugins.TweenPlugin", function(props, priority) {
this._overwriteProps = (props || "").split(",");
this._propName = this._overwriteProps[0];
this._priority = priority || 0;
this._super = TweenPlugin.prototype;
}, true);
p = TweenPlugin.prototype;
TweenPlugin.version = "1.19.0";
TweenPlugin.API = 2;
p._firstPT = null;
p._addTween = _addPropTween;
p.setRatio = _setRatio;
p._kill = function(lookup) {
var a = this._overwriteProps,
pt = this._firstPT,
i;
if (lookup[this._propName] != null) {
this._overwriteProps = [];
} else {
i = a.length;
while (--i > -1) {
if (lookup[a[i]] != null) {
a.splice(i, 1);
}
}
}
while (pt) {
if (lookup[pt.n] != null) {
if (pt._next) {
pt._next._prev = pt._prev;
}
if (pt._prev) {
pt._prev._next = pt._next;
pt._prev = null;
} else if (this._firstPT === pt) {
this._firstPT = pt._next;
}
}
pt = pt._next;
}
return false;
};
p._mod = p._roundProps = function(lookup) {
var pt = this._firstPT,
val;
while (pt) {
val = lookup[this._propName] || (pt.n != null && lookup[ pt.n.split(this._propName + "_").join("") ]);
if (val && typeof(val) === "function") { //some properties that are very plugin-specific add a prefix named after the _propName plus an underscore, so we need to ignore that extra stuff here.
if (pt.f === 2) {
pt.t._applyPT.m = val;
} else {
pt.m = val;
}
}
pt = pt._next;
}
};
TweenLite._onPluginEvent = function(type, tween) {
var pt = tween._firstPT,
changed, pt2, first, last, next;
if (type === "_onInitAllProps") {
//sorts the PropTween linked list in order of priority because some plugins need to render earlier/later than others, like MotionBlurPlugin applies its effects after all x/y/alpha tweens have rendered on each frame.
while (pt) {
next = pt._next;
pt2 = first;
while (pt2 && pt2.pr > pt.pr) {
pt2 = pt2._next;
}
if ((pt._prev = pt2 ? pt2._prev : last)) {
pt._prev._next = pt;
} else {
first = pt;
}
if ((pt._next = pt2)) {
pt2._prev = pt;
} else {
last = pt;
}
pt = next;
}
pt = tween._firstPT = first;
}
while (pt) {
if (pt.pg) if (typeof(pt.t[type]) === "function") if (pt.t[type]()) {
changed = true;
}
pt = pt._next;
}
return changed;
};
TweenPlugin.activate = function(plugins) {
var i = plugins.length;
while (--i > -1) {
if (plugins[i].API === TweenPlugin.API) {
_plugins[(new plugins[i]())._propName] = plugins[i];
}
}
return true;
};
//provides a more concise way to define plugins that have no dependencies besides TweenPlugin and TweenLite, wrapping common boilerplate stuff into one function (added in 1.9.0). You don't NEED to use this to define a plugin - the old way still works and can be useful in certain (rare) situations.
_gsDefine.plugin = function(config) {
if (!config || !config.propName || !config.init || !config.API) { throw "illegal plugin definition."; }
var propName = config.propName,
priority = config.priority || 0,
overwriteProps = config.overwriteProps,
map = {init:"_onInitTween", set:"setRatio", kill:"_kill", round:"_mod", mod:"_mod", initAll:"_onInitAllProps"},
Plugin = _class("plugins." + propName.charAt(0).toUpperCase() + propName.substr(1) + "Plugin",
function() {
TweenPlugin.call(this, propName, priority);
this._overwriteProps = overwriteProps || [];
}, (config.global === true)),
p = Plugin.prototype = new TweenPlugin(propName),
prop;
p.constructor = Plugin;
Plugin.API = config.API;
for (prop in map) {
if (typeof(config[prop]) === "function") {
p[map[prop]] = config[prop];
}
}
Plugin.version = config.version;
TweenPlugin.activate([Plugin]);
return Plugin;
};
//now run through all the dependencies discovered and if any are missing, log that to the console as a warning. This is why it's best to have TweenLite load last - it can check all the dependencies for you.
a = window._gsQueue;
if (a) {
for (i = 0; i < a.length; i++) {
a[i]();
}
for (p in _defLookup) {
if (!_defLookup[p].func) {
window.console.log("GSAP encountered missing dependency: " + p);
}
}
}
_tickerActive = false; //ensures that the first official animation forces a ticker.tick() to update the time when it is instantiated
})((typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window, "TweenLite");
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 2873 2874 2875 2876 2877 2878 2879 2880 2881 2882 2883 2884 2885 2886 2887 2888 2889 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901 2902 2903 2904 2905 2906 2907 2908 2909 2910 2911 2912 2913 2914 2915 2916 2917 2918 2919 2920 2921 2922 2923 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933 2934 2935 2936 2937 2938 2939 2940 2941 2942 2943 2944 2945 2946 2947 2948 2949 2950 2951 2952 2953 2954 2955 2956 2957 2958 2959 2960 2961 2962 2963 2964 2965 2966 2967 2968 2969 2970 2971 2972 2973 2974 2975 2976 2977 2978 2979 2980 2981 2982 2983 2984 2985 2986 2987 2988 2989 2990 2991 2992 2993 2994 2995 2996 2997 2998 2999 3000 3001 3002 3003 3004 3005 3006 3007 3008 3009 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024 3025 3026 3027 3028 3029 3030 3031 3032 3033 3034 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 3045 3046 3047 3048 3049 3050 3051 3052 3053 3054 3055 3056 3057 3058 3059 3060 3061 3062 3063 3064 3065 3066 3067 3068 3069 3070 3071 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086 3087 3088 3089 3090 3091 3092 3093 3094 3095 3096 3097 3098 3099 3100 3101 3102 3103 3104 3105 3106 3107 3108 3109 3110 3111 3112 3113 3114 3115 3116 3117 3118 3119 3120 3121 3122 3123 3124 3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175 3176 3177 3178 3179 3180 3181 3182 3183 3184 3185 3186 3187 3188 3189 3190 3191 3192 3193 3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 3236 3237 3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248 3249 3250 3251 3252 3253 3254 3255 3256 3257 3258 3259 3260 3261 3262 3263 3264 3265 3266 3267 3268 3269 3270 3271 3272 3273 3274 3275 3276 3277 3278 3279 3280 3281 3282 3283 3284 3285 3286 3287 3288 3289 3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307 3308 3309 3310 3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329 3330 3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348 3349 3350 3351 3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557 3558 3559 3560 3561 3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573 3574 3575 3576 3577 3578 3579 3580 3581 3582 3583 3584 3585 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609 3610 3611 3612 3613 3614 3615 3616 3617 3618 3619 3620 3621 3622 3623 3624 3625 3626 3627 3628 3629 3630 3631 3632 3633 3634 3635 3636 3637 3638 3639 3640 3641 3642 3643 3644 3645 3646 3647 3648 3649 3650 3651 3652 3653 3654 3655 3656 3657 3658 3659 3660 3661 3662 3663 3664 3665 3666 3667 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689 3690 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700 3701 3702 3703 3704 3705 3706 3707 3708 3709 3710 3711 3712 3713 3714 3715 3716 3717 3718 3719 3720 3721 3722 3723 3724 3725 3726 3727 3728 3729 3730 3731 3732 3733 3734 3735 3736 3737 3738 3739 3740 3741 3742 3743 3744 3745 3746 3747 3748 3749 3750 3751 3752 3753 3754 3755 3756 3757 3758 3759 3760 3761 3762 3763 3764 3765 3766 3767 3768 3769 3770 3771 3772 3773 3774 3775 3776 3777 3778 3779 3780 3781 3782 3783 3784 3785 3786 3787 3788 3789 3790 3791 3792 3793 3794 3795 3796 3797 3798 3799 3800 3801 3802 3803 3804 3805 3806 3807 3808 3809 3810 3811 3812 3813 3814 3815 3816 3817 3818 3819 3820 3821 3822 3823 3824 3825 3826 3827 3828 3829 3830 3831 3832 3833 3834 3835 3836 3837 3838 3839 3840 3841 3842 3843 3844 3845 3846 3847 3848 3849 3850 3851 3852 3853 3854 3855 3856 3857 3858 3859 3860 3861 3862 3863 3864 3865 3866 3867 3868 3869 3870 3871 3872 3873 3874 3875 3876 3877 3878 3879 3880 3881 3882 3883 3884 3885 3886 3887 3888 3889 3890 3891 3892 3893 3894 3895 3896 3897 3898 3899 3900 3901 3902 3903 3904 3905 3906 3907 3908 3909 3910 3911 3912 3913 3914 3915 3916 3917 3918 3919 3920 3921 3922 3923 3924 3925 3926 3927 3928 3929 3930 3931 3932 3933 3934 3935 3936 3937 3938 3939 3940 3941 3942 3943 3944 3945 3946 3947 3948 3949 3950 3951 3952 3953 3954 3955 3956 3957 3958 3959 3960 3961 3962 3963 3964 3965 3966 3967 3968 3969 3970 3971 3972 3973 3974 3975 3976 3977 3978 3979 3980 3981 3982 3983 3984 3985 3986 3987 3988 3989 3990 3991 3992 3993 3994 3995 3996 3997 3998 3999 4000 4001 4002 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019 4020 4021 4022 4023 4024 4025 4026 4027 4028 4029 4030 4031 4032 4033 4034 4035 4036 4037 4038 4039 4040 4041 4042 4043 4044 4045 4046 4047 4048 4049 4050 4051 4052 4053 4054 4055 4056 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067 4068 4069 4070 4071 4072 4073 4074 4075 4076 4077 4078 4079 4080 4081 4082 4083 4084 4085 4086 4087 4088 4089 4090 4091 4092 4093 4094 4095 4096 4097 4098 4099 4100 4101 4102 4103 4104 4105 4106 4107 4108 4109 4110 4111 4112 4113 4114 4115 4116 4117 4118 4119 4120 4121 4122 4123 4124 4125 4126 4127 4128 4129 4130 4131 4132 4133 4134 4135 4136 4137 4138 4139 4140 4141 4142 4143 4144 4145 4146 4147 4148 4149 4150 4151 4152 4153 4154 4155 4156 4157 4158 4159 4160 4161 4162 4163 4164 4165 4166 4167 4168 4169 4170 4171 4172 4173 4174 4175 4176 4177 4178 4179 4180 4181 4182 4183 4184 4185 4186 4187 4188 4189 4190 4191 4192 4193 4194 4195 4196 4197 4198 4199 4200 4201 4202 4203 4204 4205 4206 4207 4208 4209 4210 4211 4212 4213 4214 4215 4216 4217 4218 4219 4220 4221 4222 4223 4224 4225 4226 4227 4228 4229 4230 4231 4232 4233 4234 4235 4236 4237 4238 4239 4240 4241 4242 4243 4244 4245 4246 4247 4248 4249 4250 4251 4252 4253 4254 4255 4256 4257 4258 4259 4260 4261 4262 4263 4264 4265 4266 4267 4268 4269 4270 4271 4272 4273 4274 4275 4276 4277 4278 4279 4280 4281 4282 4283 4284 4285 4286 4287 4288 4289 4290 4291 4292 4293 4294 4295 4296 4297 4298 4299 4300 4301 4302 4303 4304 4305 4306 4307 4308 4309 4310 4311 4312 4313 4314 4315 4316 4317 4318 4319 4320 4321 4322 4323 4324 4325 4326 4327 4328 4329 4330 4331 4332 4333 4334 4335 4336 4337 4338 4339 4340 4341 4342 4343 4344 4345 4346 4347 4348 4349 4350 4351 4352 4353 4354 4355 4356 4357 4358 4359 4360 4361 4362 4363 4364 4365 4366 4367 4368 4369 4370 4371 4372 4373 4374 4375 4376 4377 4378 4379 4380 4381 4382 4383 4384 4385 4386 4387 4388 4389 4390 4391 4392 4393 4394 4395 4396 4397 4398 4399 4400 4401 4402 4403 4404 4405 4406 4407 4408 4409 4410 4411 4412 4413 4414 4415 4416 4417 4418 4419 4420 4421 4422 4423 4424 4425 4426 4427 4428 4429 4430 4431 4432 4433 4434 4435 4436 4437 4438 4439 4440 4441 4442 4443 4444 4445 4446 4447 4448 4449 4450 4451 4452 4453 4454 4455 4456 4457 4458 4459 4460 4461 4462 4463 4464 4465 4466 4467 4468 4469 4470 4471 4472 4473 4474 4475 4476 4477 4478 4479 4480 4481 4482 4483 4484 4485 4486 4487 4488 4489 4490 4491 4492 4493 4494 4495 4496 4497 4498 4499 4500 4501 4502 4503 4504 4505 4506 4507 4508 4509 4510 4511 4512 4513 4514 4515 4516 4517 4518 4519 4520 4521 4522 4523 4524 4525 4526 4527 4528 4529 4530 4531 4532 4533 4534 4535 4536 4537 4538 4539 4540 4541 4542 4543 4544 4545 4546 4547 4548 4549 4550 4551 4552 4553 4554 4555 4556 4557 4558 4559 4560 4561 4562 4563 4564 4565 4566 4567 4568 4569 4570 4571 4572 4573 4574 4575 4576 4577 4578 4579 4580 4581 4582 4583 4584 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595 4596 4597 4598 4599 4600 4601 4602 4603 4604 4605 4606 4607 4608 4609 4610 4611 4612 4613 4614 4615 4616 4617 4618 4619 4620 4621 4622 4623 4624 4625 4626 4627 4628 4629 4630 4631 4632 4633 4634 4635 4636 4637 4638 4639 4640 4641 4642 4643 4644 4645 4646 4647 4648 4649 4650 4651 4652 4653 4654 4655 4656 4657 4658 4659 4660 4661 4662 4663 4664 4665 4666 4667 4668 4669 4670 4671 4672 4673 4674 4675 4676 4677 4678 4679 4680 4681 4682 4683 4684 4685 4686 4687 4688 4689 4690 4691 4692 4693 4694 4695 4696 4697 4698 4699 4700 4701 4702 4703 4704 4705 4706 4707 4708 4709 4710 4711 4712 4713 4714 4715 4716 4717 4718 4719 4720 4721 4722 4723 4724 4725 4726 4727 4728 4729 4730 4731 4732 4733 4734 4735 4736 4737 4738 4739 4740 4741 4742 4743 4744 4745 4746 4747 4748 4749 4750 4751 4752 4753 4754 4755 4756 4757 4758 4759 4760 4761 4762 4763 4764 4765 4766 4767 4768 4769 4770 4771 4772 4773 4774 4775 4776 4777 4778 4779 4780 4781 4782 4783 4784 4785 4786 4787 4788 4789 4790 4791 4792 4793 4794 4795 4796 4797 4798 4799 4800 4801 4802 4803 4804 4805 4806 4807 4808 4809 4810 4811 4812 4813 4814 4815 4816 4817 4818 4819 4820 4821 4822 4823 4824 4825 4826 4827 4828 4829 4830 4831 4832 4833 4834 4835 4836 4837 4838 4839 4840 4841 4842 4843 4844 4845 4846 4847 4848 4849 4850 4851 4852 4853 4854 4855 4856 4857 4858 4859 4860 4861 4862 4863 4864 4865 4866 4867 4868 4869 4870 4871 4872 4873 4874 4875 4876 4877 4878 4879 4880 4881 4882 4883 4884 4885 4886 4887 4888 4889 4890 4891 4892 4893 4894 4895 4896 4897 4898 4899 4900 4901 4902 4903 4904 4905 4906 4907 4908 4909 4910 4911 4912 4913 4914 4915 4916 4917 4918 4919 4920 4921 4922 4923 4924 4925 4926 4927 4928 4929 4930 4931 4932 4933 4934 4935 4936 4937 4938 4939 4940 4941 4942 4943 4944 4945 4946 4947 4948 4949 4950 4951 4952 4953 4954 4955 4956 4957 4958 4959 4960 4961 4962 4963 4964 4965 4966 4967 4968 4969 4970 4971 4972 4973 4974 4975 4976 4977 4978 4979 4980 4981 4982 4983 4984 4985 4986 4987 4988 4989 4990 4991 4992 4993 4994 4995 4996 4997 4998 4999 5000 5001 5002 5003 5004 5005 5006 5007 5008 5009 5010 5011 5012 5013 5014 5015 5016 5017 5018 5019 5020 5021 5022 5023 5024 5025 5026 5027 5028 5029 5030 5031 5032 5033 5034 5035 5036 5037 5038 5039 5040 5041 5042 5043 5044 5045 5046 5047 5048 5049 5050 5051 5052 5053 5054 5055 5056 5057 5058 5059 5060 5061 5062 5063 5064 5065 5066 5067 5068 5069 5070 5071 5072 5073 5074 5075 5076 5077 5078 5079 5080 5081 5082 5083 5084 5085 5086 5087 5088 5089 5090 5091 5092 5093 5094 5095 5096 5097 5098 5099 5100 5101 5102 5103 5104 5105 5106 5107 5108 5109 5110 5111 5112 5113 5114 5115 5116 5117 5118 5119 5120 5121 5122 5123 5124 5125 5126 5127 5128 5129 5130 5131 5132 5133 5134 5135 5136 5137 5138 5139 5140 5141 5142 5143 5144 5145 5146 5147 5148 5149 5150 5151 5152 5153 5154 5155 5156 5157 5158 5159 5160 5161 5162 5163 5164 5165 5166 5167 5168 5169 5170 5171 5172 5173 5174 5175 5176 5177 5178 5179 5180 5181 5182 5183 5184 5185 5186 5187 5188 5189 5190 5191 5192 5193 5194 5195 5196 5197 5198 5199 5200 5201 5202 5203 5204 5205 5206 5207 5208 5209 5210 5211 5212 5213 5214 5215 5216 5217 5218 5219 5220 5221 5222 5223 5224 5225 5226 5227 5228 5229 5230 5231 5232 5233 5234 5235 5236 5237 5238 5239 5240 5241 5242 5243 5244 5245 5246 5247 5248 5249 5250 5251 5252 5253 5254 5255 5256 5257 5258 5259 5260 5261 5262 5263 5264 5265 5266 5267 5268 5269 5270 5271 5272 5273 5274 5275 5276 5277 5278 5279 5280 5281 5282 5283 5284 5285 5286 5287 5288 5289 5290 5291 5292 5293 5294 5295 5296 5297 5298 5299 5300 5301 5302 5303 5304 5305 5306 5307 5308 5309 5310 5311 5312 5313 5314 5315 5316 5317 5318 5319 5320 5321 5322 5323 5324 5325 5326 5327 5328 5329 5330 5331 5332 5333 5334 5335 5336 5337 5338 5339 5340 5341 5342 5343 5344 5345 5346 5347 5348 5349 5350 5351 5352 5353 5354 5355 5356 5357 5358 5359 5360 5361 5362 5363 5364 5365 5366 5367 5368 5369 5370 5371 5372 5373 5374 5375 5376 5377 5378 5379 5380 5381 5382 5383 5384 5385 5386 5387 5388 5389 5390 5391 5392 5393 5394 5395 5396 5397 5398 5399 5400 5401 5402 5403 5404 5405 5406 5407 5408 5409 5410 5411 5412 5413 5414 5415 5416 5417 5418 5419 5420 5421 5422 5423 5424 5425 5426 5427 5428 5429 5430 5431 5432 5433 5434 5435 5436 5437 5438 5439 5440 5441 5442 5443 5444 5445 5446 5447 5448 5449 5450 5451 5452 5453 5454 5455 5456 5457 5458 5459 5460 5461 5462 5463 5464 5465 5466 5467 5468 5469 5470 5471 5472 5473 5474 5475 5476 5477 5478 5479 5480 5481 5482 5483 5484 5485 5486 5487 5488 5489 5490 5491 5492 5493 5494 5495 5496 5497 5498 5499 5500 5501 5502 5503 5504 5505 5506 5507 5508 5509 5510 5511 5512 5513 5514 5515 5516 5517 5518 5519 5520 5521 5522 5523 5524 5525 5526 5527 5528 5529 5530 5531 5532 5533 5534 5535 5536 5537 5538 5539 5540 5541 5542 5543 5544 5545 5546 5547 5548 5549 5550 5551 5552 5553 5554 5555 5556 5557 5558 5559 5560 5561 5562 5563 5564 5565 5566 5567 5568 5569 5570 5571 5572 5573 5574 5575 5576 5577 5578 5579 5580 5581 5582 5583 5584 5585 5586 5587 5588 5589 5590 5591 5592 5593 5594 5595 5596 5597 5598 5599 5600 5601 5602 5603 5604 5605 5606 5607 5608 5609 5610 5611 5612 5613 5614 5615 5616 5617 5618 5619 5620 5621 5622 5623 5624 5625 5626 5627 5628 5629 5630 5631 5632 5633 5634 5635 5636 5637 5638 5639 5640 5641 5642 5643 5644 5645 5646 5647 5648 5649 5650 5651 5652 5653 5654 5655 5656 5657 5658 5659 5660 5661 5662 5663 5664 5665 5666 5667 5668 5669 5670 5671 5672 5673 5674 5675 5676 5677 5678 5679 5680 5681 5682 5683 5684 5685 5686 5687 5688 5689 5690 5691 5692 5693 5694 5695 5696 5697 5698 5699 5700 5701 5702 5703 5704 5705 5706 5707 5708 5709 5710 5711 5712 5713 5714 5715 5716 5717 5718 5719 5720 5721 5722 5723 5724 5725 5726 5727 5728 5729 5730 5731 5732 5733 5734 5735 5736 5737 5738 5739 5740 5741 5742 5743 5744 5745 5746 5747 5748 5749 5750 5751 5752 5753 5754 5755 5756 5757 5758 5759 5760 5761 5762 5763 5764 5765 5766 5767 5768 5769 5770 5771 5772 5773 5774 5775 5776 5777 5778 5779 5780 5781 5782 5783 5784 5785 5786 5787 5788 5789 5790 5791 5792 5793 5794 5795 5796 5797 5798 5799 5800 5801 5802 5803 5804 5805 5806 5807 5808 5809 5810 5811 5812 5813 5814 5815 5816 5817 5818 5819 5820 5821 5822 5823 5824 5825 5826 5827 5828 5829 5830 5831 5832 5833 5834 5835 5836 5837 5838 5839 5840 5841 5842 5843 5844 5845 5846 5847 5848 5849 5850 5851 5852 5853 5854 5855 5856 5857 5858 5859 5860 5861 5862 5863 5864 5865 5866 5867 5868 5869 5870 5871 5872 5873 5874 5875 5876 5877 5878 5879 5880 5881 5882 5883 5884 5885 5886 5887 5888 5889 5890 5891 5892 5893 5894 5895 5896 5897 5898 5899 5900 5901 5902 5903 5904 5905 5906 5907 5908 5909 5910 5911 5912 5913 5914 5915 5916 5917 5918 5919 5920 5921 5922 5923 5924 5925 5926 5927 5928 5929 5930 5931 5932 5933 5934 5935 5936 5937 5938 5939 5940 5941 5942 5943 5944 5945 5946 5947 5948 5949 5950 5951 5952 5953 5954 5955 5956 5957 5958 5959 5960 5961 5962 5963 5964 5965 5966 5967 5968 5969 5970 5971 5972 5973 5974 5975 5976 5977 5978 5979 5980 5981 5982 5983 5984 5985 5986 5987 5988 5989 5990 5991 5992 5993 5994 5995 5996 5997 5998 5999 6000 6001 6002 6003 6004 6005 6006 6007 6008 6009 6010 6011 6012 6013 6014 6015 6016 6017 6018 6019 6020 6021 6022 6023 6024 6025 6026 6027 6028 6029 6030 6031 6032 6033 6034 6035 6036 6037 6038 6039 6040 6041 6042 6043 6044 6045 6046 6047 6048 6049 6050 6051 6052 6053 6054 6055 6056 6057 6058 6059 6060 6061 6062 6063 6064 6065 6066 6067 6068 6069 6070 6071 6072 6073 6074 6075 6076 6077 6078 6079 6080 6081 6082 6083 6084 6085 6086 6087 6088 6089 6090 6091 6092 6093 6094 6095 6096 6097 6098 6099 6100 6101 6102 6103 6104 6105 6106 6107 6108 6109 6110 6111 6112 6113 6114 6115 6116 6117 6118 6119 6120 6121 6122 6123 6124 6125 6126 6127 6128 6129 6130 6131 6132 6133 6134 6135 6136 6137 6138 6139 6140 6141 6142 6143 6144 6145 6146 6147 6148 6149 6150 6151 6152 6153 6154 6155 6156 6157 6158 6159 6160 6161 6162 6163 6164 6165 6166 6167 6168 6169 6170 6171 6172 6173 6174 6175 6176 6177 6178 6179 6180 6181 6182 6183 6184 6185 6186 6187 6188 6189 6190 6191 6192 6193 6194 6195 6196 6197 6198 6199 6200 6201 6202 6203 6204 6205 6206 6207 6208 6209 6210 6211 6212 6213 6214 6215 6216 6217 6218 6219 6220 6221 6222 6223 6224 6225 6226 6227 6228 6229 6230 6231 6232 6233 6234 6235 6236 6237 6238 6239 6240 6241 6242 6243 6244 6245 6246 6247 6248 6249 6250 6251 6252 6253 6254 6255 6256 6257 6258 6259 6260 6261 6262 6263 6264 6265 6266 6267 6268 6269 6270 6271 6272 6273 6274 6275 6276 6277 6278 6279 6280 6281 6282 6283 6284 6285 6286 6287 6288 6289 6290 6291 6292 6293 6294 6295 6296 6297 6298 6299 6300 6301 6302 6303 6304 6305 6306 6307 6308 6309 6310 6311 6312 6313 6314 6315 6316 6317 6318 6319 6320 6321 6322 6323 6324 6325 6326 6327 6328 6329 6330 6331 6332 6333 6334 6335 6336 6337 6338 6339 6340 6341 6342 6343 6344 6345 6346 6347 6348 6349 6350 6351 6352 6353 6354 6355 6356 6357 6358 6359 6360 6361 6362 6363 6364 6365 6366 6367 6368 6369 6370 6371 6372 6373 6374 6375 6376 6377 6378 6379 6380 6381 6382 6383 6384 6385 6386 6387 6388 6389 6390 6391 6392 6393 6394 6395 6396 6397 6398 6399 6400 6401 6402 6403 6404 6405 6406 6407 6408 6409 6410 6411 6412 6413 6414 6415 6416 6417 6418 6419 6420 6421 6422 6423 6424 6425 6426 6427 6428 6429 6430 6431 6432 6433 6434 6435 6436 6437 6438 6439 6440 6441 6442 6443 6444 6445 6446 6447 6448 6449 6450 6451 6452 6453 6454 6455 6456 6457 6458 6459 6460 6461 6462 6463 6464 6465 6466 6467 6468 6469 6470 6471 6472 6473 6474 6475 6476 6477 6478 6479 6480 6481 6482 6483 6484 6485 6486 6487 6488 6489 6490 6491 6492 6493 6494 6495 6496 6497 6498 6499 6500 6501 6502 6503 6504 6505 6506 6507 6508 6509 6510 6511 6512 6513 6514 6515 6516 6517 6518 6519 6520 6521 6522 6523 6524 6525 6526 6527 6528 6529 6530 6531 6532 6533 6534 6535 6536 6537 6538 6539 6540 6541 6542 6543 6544 6545 6546 6547 6548 6549 6550 6551 6552 6553 6554 6555 6556 6557 6558 6559 6560 6561 6562 6563 6564 6565 6566 6567 6568 6569 6570 6571 6572 6573 6574 6575 6576 6577 6578 6579 6580 6581 6582 6583 6584 6585 6586 6587 6588 6589 6590 6591 6592 6593 6594 6595 6596 6597 6598 6599 6600 6601 6602 6603 6604 6605 6606 6607 6608 6609 6610 6611 6612 6613 6614 6615 6616 6617 6618 6619 6620 6621 6622 6623 6624 6625 6626 6627 6628 6629 6630 6631 6632 6633 6634 6635 6636 6637 6638 6639 6640 6641 6642 6643 6644 6645 6646 6647 6648 6649 6650 6651 6652 6653 6654 6655 6656 6657 6658 6659 6660 6661 6662 6663 6664 6665 6666 6667 6668 6669 6670 6671 6672 6673 6674 6675 6676 6677 6678 6679 6680 6681 6682 6683 6684 6685 6686 6687 6688 6689 6690 6691 6692 6693 6694 6695 6696 6697 6698 6699 6700 6701 6702 6703 6704 6705 6706 6707 6708 6709 6710 6711 6712 6713 6714 6715 6716 6717 6718 6719 6720 6721 6722 6723 6724 6725 6726 6727 6728 6729 6730 6731 6732 6733 6734 6735 6736 6737 6738 6739 6740 6741 6742 6743 6744 6745 6746 6747 6748 6749 6750 6751 6752 6753 6754 6755 6756 6757 6758 6759 6760 6761 6762 6763 6764 6765 6766 6767 6768 6769 6770 6771 6772 6773 6774 6775 6776 6777 6778 6779 6780 6781 6782 6783 6784 6785 6786 6787 6788 6789 6790 6791 6792 6793 6794 6795 6796 6797 6798 6799 6800 6801 6802 6803 6804 6805 6806 6807 6808 6809 6810 6811 6812 6813 6814 6815 6816 6817 6818 6819 6820 6821 6822 6823 6824 6825 6826 6827 6828 6829 6830 6831 6832 6833 6834 6835 6836 6837 6838 6839 6840 6841 6842 6843 6844 6845 6846 6847 6848 6849 6850 6851 6852 6853 6854 6855 6856 6857 6858 6859 6860 6861 6862 6863 6864 6865 6866 6867 6868 6869 6870 6871 6872 6873 6874 6875 6876 6877 6878 6879 6880 6881 6882 6883 6884 6885 6886 6887 6888 6889 6890 6891 6892 6893 6894 6895 6896 6897 6898 6899 6900 6901 6902 6903 6904 6905 6906 6907 6908 6909 6910 6911 6912 6913 6914 6915 6916 6917 6918 6919 6920 6921 6922 6923 6924 6925 6926 6927 6928 6929 6930 6931 6932 6933 6934 6935 6936 6937 6938 6939 6940 6941 6942 6943 6944 6945 6946 6947 6948 6949 6950 6951 6952 6953 6954 6955 6956 6957 6958 6959 6960 6961 6962 6963 6964 6965 6966 6967 6968 6969 6970 6971 6972 6973 6974 6975 6976 6977 6978 6979 6980 6981 6982 6983 6984 6985 6986 6987 6988 6989 6990 6991 6992 6993 6994 6995 6996 6997 6998 6999 7000 7001 7002 7003 7004 7005 7006 7007 7008 7009 7010 7011 7012 7013 7014 7015 7016 7017 7018 7019 7020 7021 7022 7023 7024 7025 7026 7027 7028 7029 7030 7031 7032 7033 7034 7035 7036 7037 7038 7039 7040 7041 7042 7043 7044 7045 7046 7047 7048 7049 7050 7051 7052 7053 7054 7055 7056 7057 7058 7059 7060 7061 7062 7063 7064 7065 7066 7067 7068 7069 7070 7071 7072 7073 7074 7075 7076 7077 7078 7079 7080 7081 7082 7083 7084 7085 7086 7087 7088 7089 7090 7091 7092 7093 7094 7095 7096 7097 7098 7099 7100 7101 7102 7103 7104 7105 7106 7107 7108 7109 7110 7111 7112 7113 7114 7115 7116 7117 7118 7119 7120 7121 7122 7123 7124 7125 7126 7127 7128 7129 7130 7131 7132 7133 7134 7135 7136 7137 7138 7139 7140 7141 7142 7143 7144 7145 7146 7147 7148 7149 7150 7151 7152 7153 7154 7155 7156 7157 7158 7159 7160 7161 7162 7163 7164 7165 7166 7167 7168 7169 7170 7171 7172 7173 7174 7175 7176 7177 7178 7179 7180 7181 7182 7183 7184 7185 7186 7187 7188 7189 7190 7191 7192 7193 7194 7195 7196 7197 7198 7199 7200 7201 7202 7203 7204 7205 7206 7207 7208 7209 7210 7211 7212 7213 7214 7215 7216 7217 7218 7219 7220 7221 7222 7223 7224 7225 7226 7227 7228 7229 7230 7231 7232 7233 7234 7235 7236 7237 7238 7239 7240 7241 7242 7243 7244 7245 7246 7247 7248 7249 7250 7251 7252 7253 7254 7255 7256 7257 7258 7259 7260 7261 7262 7263 7264 7265 7266 7267 7268 7269 7270 7271 7272 7273 7274 7275 7276 7277 7278 7279 7280 7281 7282 7283 7284 7285 7286 7287 7288 7289 7290 7291 7292 7293 7294 7295 7296 7297 7298 7299 7300 7301 7302 7303 7304 7305 7306 7307 7308 7309 7310 7311 7312 7313 7314 7315 7316 7317 7318 7319 7320 7321 7322 7323 7324 7325 7326 7327 7328 7329 7330 7331 7332 7333 7334 7335 7336 7337 7338 7339 7340 7341 7342 7343 7344 7345 7346 7347 7348 7349 7350 7351 7352 7353 7354 7355 7356 7357 7358 7359 7360 7361 7362 7363 7364 7365 7366 7367 7368 7369 7370 7371 7372 7373 7374 7375 7376 7377 7378 7379 7380 7381 7382 7383 7384 7385 7386 7387 7388 7389 7390 7391 7392 7393 7394 7395 7396 7397 7398 7399 7400 7401 7402 7403 7404 7405 7406 7407 7408 7409 7410 7411 7412 7413 7414 7415 7416 7417 7418 7419 7420 7421 7422 7423 7424 7425 7426 7427 7428 7429 7430 7431 7432 7433 7434 7435 7436 7437 7438 7439 7440 7441 7442 7443 7444 7445 7446 7447 7448 7449 7450 7451 7452 7453 7454 7455 7456 7457 7458 7459 7460 7461 7462 7463 7464 7465 7466 7467 7468 7469 7470 7471 7472 7473 7474 7475 7476 7477 7478 7479 7480 7481 7482 7483 7484 7485 7486 7487 7488 7489 7490 7491 7492 7493 7494 7495 7496 7497 7498 7499 7500 7501 7502 7503 7504 7505 7506 7507 7508 7509 7510 7511 7512 7513 7514 7515 7516 7517 7518 7519 7520 7521 7522 7523 7524 7525 7526 7527 7528 7529 7530 7531 7532 7533 7534 7535 7536 7537 7538 7539 7540 7541 7542 7543 7544 7545 7546 7547 7548 7549 7550 7551 7552 7553 7554 7555 7556 7557 7558 7559 7560 7561 7562 7563 7564 7565 7566 7567 7568 7569 7570 7571 7572 7573 7574 7575 7576 7577 7578 7579 7580 7581 7582 7583 7584 7585 7586 7587 7588 7589 7590 7591 7592 7593 7594 7595 7596 7597 7598 7599 7600 7601 7602 7603 7604 7605 7606 7607 7608 7609 7610 7611 7612 7613 7614 7615 7616 7617 7618 7619 7620 7621 7622 7623 7624 7625 7626 7627 7628 7629 7630 7631 7632 7633 7634 7635 7636 7637 7638 7639 7640 7641 7642 7643 7644 7645 7646 7647 7648 7649 7650 7651 7652 7653 7654 7655 7656 7657 7658 7659 7660 7661 7662 7663 7664 7665 7666 7667 7668 7669 7670 7671 7672 7673 7674 7675 7676 7677 7678 7679 7680 7681 7682 7683 7684 7685 7686 7687 7688 7689 7690 7691 7692 7693 7694 7695 7696 7697 7698 7699 7700 7701 7702 7703 7704 7705 7706 7707 7708 7709 7710 7711 7712 7713 7714 7715 7716 7717 7718 7719 7720 7721 7722 7723 7724 7725 7726 7727 7728 7729 7730 7731 7732 7733 7734 7735 7736 7737 7738 7739 7740 7741 7742 7743 7744 7745 7746 7747 7748 7749 7750 7751 7752 7753 7754 7755 7756 7757 7758 7759 7760 7761 7762 7763 7764 7765 7766 7767 7768 7769 7770 7771 7772 7773 7774 7775 7776 7777 7778 7779 7780 7781 7782 7783 7784 7785 7786 7787 7788 7789 7790 7791 7792 7793 7794 7795 7796 7797 7798 7799 7800 7801 7802 7803 7804 7805 7806 7807 7808 7809 7810 7811 7812 7813 7814 7815 7816 7817 7818 7819 7820 7821 7822 7823 7824 7825 7826 7827 7828 7829 7830 7831 7832 7833 7834 7835 7836 7837 7838 7839 7840 7841 7842 7843 7844 7845 7846 7847 7848 7849 7850 7851 7852 7853 7854 7855 7856 7857 7858 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 1 1 1 1 1 1 1 1 1 3 3 1 1 1 1 1 1 1 1 12 12 12 12 12 12 12 12 12 1 20 1 1 1 1 55 45 10 10 10 2 2 8 8 3 3 1 1 1 8 8 1 1 1 1 61 61 61 61 61 53 61 61 61 61 61 26 26 26 26 61 61 61 4 4 4 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 4 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 12 12 12 12 6 6 6 44 44 44 42 42 42 42 3 3 3 3 3 3 3 2 2 1 1 2 2 2 2 2 1 1 1 1 1 2 2 2 1 1 1 1 1 2 2 2 40 40 40 40 40 40 40 40 2 146 2 2 2 40 40 2 1 1 1 1 1 1 1 1 3 3 3 3 3 3 3 3 3 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 1.19.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) { var _slice = function(a) { //don't use [].slice because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, _applyCycle = function(vars, targets, i) { var alt = vars.cycle, p, val; for (p in alt) { val = alt[p]; vars[p] = (typeof(val) === "function") ? val(i, targets[i]) : val[i % val.length]; } delete vars.cycle; }, TweenMax = function(target, duration, vars) { TweenLite.call(this, target, duration, vars); this._cycle = 0; this._yoyo = (this.vars.yoyo === true); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._dirty = true; //ensures that if there is any repeat, the totalDuration will get recalculated to accurately report it. this.render = TweenMax.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method) }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _isSelector = TweenLiteInternals.isSelector, _isArray = TweenLiteInternals.isArray, p = TweenMax.prototype = TweenLite.to({}, 0.1, {}), _blankArray = []; TweenMax.version = "1.19.1"; p.constructor = TweenMax; p.kill()._gc = false; TweenMax.killTweensOf = TweenMax.killDelayedCallsTo = TweenLite.killTweensOf; TweenMax.getTweensOf = TweenLite.getTweensOf; TweenMax.lagSmoothing = TweenLite.lagSmoothing; TweenMax.ticker = TweenLite.ticker; TweenMax.render = TweenLite.render; p.invalidate = function() { this._yoyo = (this.vars.yoyo === true); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._uncache(true); return TweenLite.prototype.invalidate.call(this); }; p.updateTo = function(vars, resetDuration) { var curRatio = this.ratio, immediate = this.vars.immediateRender || vars.immediateRender, p; if (resetDuration && this._startTime < this._timeline._time) { this._startTime = this._timeline._time; this._uncache(false); if (this._gc) { this._enabled(true, false); } else { this._timeline.insert(this, this._startTime - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct. } } for (p in vars) { this.vars[p] = vars[p]; } if (this._initted || immediate) { if (resetDuration) { this._initted = false; if (immediate) { this.render(0, true, true); } } else { if (this._gc) { this._enabled(true, false); } if (this._notifyPluginsOfEnabled && this._firstPT) { TweenLite._onPluginEvent("_onDisable", this); //in case a plugin like MotionBlur must perform some cleanup tasks } if (this._time / this._duration > 0.998) { //if the tween has finished (or come extremely close to finishing), we just need to rewind it to 0 and then render it again at the end which forces it to re-initialize (parsing the new vars). We allow tweens that are close to finishing (but haven't quite finished) to work this way too because otherwise, the values are so small when determining where to project the starting values that binary math issues creep in and can make the tween appear to render incorrectly when run backwards. var prevTime = this._totalTime; this.render(0, true, false); this._initted = false; this.render(prevTime, true, false); } else { this._initted = false; this._init(); if (this._time > 0 || immediate) { var inv = 1 / (1 - curRatio), pt = this._firstPT, endValue; while (pt) { endValue = pt.s + pt.c; pt.c *= inv; pt.s = endValue - pt.c; pt = pt._next; } } } } } return this; }; p.render = function(time, suppressEvents, force) { if (!this._initted) if (this._duration === 0 && this.vars.repeat) { //zero duration tweens that render immediately have render() called from TweenLite's constructor, before TweenMax's constructor has finished setting _repeat, _repeatDelay, and _yoyo which are critical in determining totalDuration() so we need to call invalidate() which is a low-kb way to get those set properly. this.invalidate(); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), prevTime = this._time, prevTotalTime = this._totalTime, prevCycle = this._cycle, duration = this._duration, prevRawPrevTime = this._rawPrevTime, isComplete, callback, pt, cycleDuration, r, type, pow, rawPrevTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = totalDur; this._cycle = this._repeat; if (this._yoyo && (this._cycle & 1) !== 0) { this._time = 0; this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0; } else { this._time = duration; this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1; } if (!this._reversed) { isComplete = true; callback = "onComplete"; force = (force || this._timeline.autoRemoveChildren); //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. } if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate. time = 0; } if (prevRawPrevTime < 0 || (time <= 0 && time >= -0.0000001) || (prevRawPrevTime === _tinyNum && this.data !== "isPause")) if (prevRawPrevTime !== time) { //note: when this.data is "isPause", it's a callback added by addPause() on a timeline that we should not be triggered when LEAVING its exact start time. In other words, tl.addPause(1).play(1) shouldn't pause. force = true; if (prevRawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = this._cycle = 0; this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0; if (prevTotalTime !== 0 || (duration === 0 && prevRawPrevTime > 0)) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (prevRawPrevTime >= 0) { force = true; } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately. force = true; } } else { this._totalTime = this._time = time; if (this._repeat !== 0) { cycleDuration = duration + this._repeatDelay; this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!) if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration && prevTotalTime <= time) { this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning) } this._time = this._totalTime - (this._cycle * cycleDuration); if (this._yoyo) if ((this._cycle & 1) !== 0) { this._time = duration - this._time; } if (this._time > duration) { this._time = duration; } else if (this._time < 0) { this._time = 0; } } if (this._easeType) { r = this._time / duration; type = this._easeType; pow = this._easePower; if (type === 1 || (type === 3 && r >= 0.5)) { r = 1 - r; } if (type === 3) { r *= 2; } if (pow === 1) { r *= r; } else if (pow === 2) { r *= r * r; } else if (pow === 3) { r *= r * r * r; } else if (pow === 4) { r *= r * r * r * r; } if (type === 1) { this.ratio = 1 - r; } else if (type === 2) { this.ratio = r; } else if (this._time / duration < 0.5) { this.ratio = r / 2; } else { this.ratio = 1 - (r / 2); } } else { this.ratio = this._ease.getRatio(this._time / duration); } } if (prevTime === this._time && !force && prevCycle === this._cycle) { if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate. this._callback("onUpdate"); } return; } else if (!this._initted) { this._init(); if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example. return; } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) { //we stick it in the queue for rendering at the very end of the tick - this is a performance optimization because browsers invalidate styles and force a recalculation if you read, write, and then read style data (so it's better to read/read/read/write/write/write than read/write/read/write/read/write). The down side, of course, is that usually you WANT things to render immediately because you may have code running right after that which depends on the change. Like imagine running TweenLite.set(...) and then immediately after that, creating a nother tween that animates the same property to another value; the starting values of that 2nd tween wouldn't be accurate if lazy is true. this._time = prevTime; this._totalTime = prevTotalTime; this._rawPrevTime = prevRawPrevTime; this._cycle = prevCycle; TweenLiteInternals.lazyTweens.push(this); this._lazy = [time, suppressEvents]; return; } //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently. if (this._time && !isComplete) { this.ratio = this._ease.getRatio(this._time / duration); } else if (isComplete && this._ease._calcEnd) { this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1); } } if (this._lazy !== false) { this._lazy = false; } if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) { this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done. } if (prevTotalTime === 0) { if (this._initted === 2 && time > 0) { //this.invalidate(); this._init(); //will just apply overwriting since _initted of (2) means it was a from() tween that had immediateRender:true } if (this._startAt) { if (time >= 0) { this._startAt.render(time, suppressEvents, force); } else if (!callback) { callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area. } } if (this.vars.onStart) if (this._totalTime !== 0 || duration === 0) if (!suppressEvents) { this._callback("onStart"); } } pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](pt.c * this.ratio + pt.s); } else { pt.t[pt.p] = pt.c * this.ratio + pt.s; } pt = pt._next; } if (this._onUpdate) { if (time < 0) if (this._startAt && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values. this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete. } if (!suppressEvents) if (this._totalTime !== prevTotalTime || callback) { this._callback("onUpdate"); } } if (this._cycle !== prevCycle) if (!suppressEvents) if (!this._gc) if (this.vars.onRepeat) { this._callback("onRepeat"); } if (callback) if (!this._gc || force) { //check gc because there's a chance that kill() could be called in an onUpdate if (time < 0 && this._startAt && !this._onUpdate && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values. this._startAt.render(time, suppressEvents, force); } if (isComplete) { if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless. this._rawPrevTime = 0; } } }; //---- STATIC FUNCTIONS ----------------------------------------------------------------------------------------------------------- TweenMax.to = function(target, duration, vars) { return new TweenMax(target, duration, vars); }; TweenMax.from = function(target, duration, vars) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return new TweenMax(target, duration, vars); }; TweenMax.fromTo = function(target, duration, fromVars, toVars) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return new TweenMax(target, duration, toVars); }; TweenMax.staggerTo = TweenMax.allTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { stagger = stagger || 0; var delay = 0, a = [], finalComplete = function() { if (vars.onComplete) { vars.onComplete.apply(vars.onCompleteScope || this, arguments); } onCompleteAll.apply(onCompleteAllScope || vars.callbackScope || this, onCompleteAllParams || _blankArray); }, cycle = vars.cycle, fromCycle = (vars.startAt && vars.startAt.cycle), l, copy, i, p; if (!_isArray(targets)) { if (typeof(targets) === "string") { targets = TweenLite.selector(targets) || targets; } if (_isSelector(targets)) { targets = _slice(targets); } } targets = targets || []; if (stagger < 0) { targets = _slice(targets); targets.reverse(); stagger *= -1; } l = targets.length - 1; for (i = 0; i <= l; i++) { copy = {}; for (p in vars) { copy[p] = vars[p]; } if (cycle) { _applyCycle(copy, targets, i); if (copy.duration != null) { duration = copy.duration; delete copy.duration; } } if (fromCycle) { fromCycle = copy.startAt = {}; for (p in vars.startAt) { fromCycle[p] = vars.startAt[p]; } _applyCycle(copy.startAt, targets, i); } copy.delay = delay + (copy.delay || 0); if (i === l && onCompleteAll) { copy.onComplete = finalComplete; } a[i] = new TweenMax(targets[i], duration, copy); delay += stagger; } return a; }; TweenMax.staggerFrom = TweenMax.allFrom = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return TweenMax.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; TweenMax.staggerFromTo = TweenMax.allFromTo = function(targets, duration, fromVars, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return TweenMax.staggerTo(targets, duration, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; TweenMax.delayedCall = function(delay, callback, params, scope, useFrames) { return new TweenMax(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, callbackScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, immediateRender:false, useFrames:useFrames, overwrite:0}); }; TweenMax.set = function(target, vars) { return new TweenMax(target, 0, vars); }; TweenMax.isTweening = function(target) { return (TweenLite.getTweensOf(target, true).length > 0); }; var _getChildrenOf = function(timeline, includeTimelines) { var a = [], cnt = 0, tween = timeline._first; while (tween) { if (tween instanceof TweenLite) { a[cnt++] = tween; } else { if (includeTimelines) { a[cnt++] = tween; } a = a.concat(_getChildrenOf(tween, includeTimelines)); cnt = a.length; } tween = tween._next; } return a; }, getAllTweens = TweenMax.getAllTweens = function(includeTimelines) { return _getChildrenOf(Animation._rootTimeline, includeTimelines).concat( _getChildrenOf(Animation._rootFramesTimeline, includeTimelines) ); }; TweenMax.killAll = function(complete, tweens, delayedCalls, timelines) { if (tweens == null) { tweens = true; } if (delayedCalls == null) { delayedCalls = true; } var a = getAllTweens((timelines != false)), l = a.length, allTrue = (tweens && delayedCalls && timelines), isDC, tween, i; for (i = 0; i < l; i++) { tween = a[i]; if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) { if (complete) { tween.totalTime(tween._reversed ? 0 : tween.totalDuration()); } else { tween._enabled(false, false); } } } }; TweenMax.killChildTweensOf = function(parent, complete) { if (parent == null) { return; } var tl = TweenLiteInternals.tweenLookup, a, curParent, p, i, l; if (typeof(parent) === "string") { parent = TweenLite.selector(parent) || parent; } if (_isSelector(parent)) { parent = _slice(parent); } if (_isArray(parent)) { i = parent.length; while (--i > -1) { TweenMax.killChildTweensOf(parent[i], complete); } return; } a = []; for (p in tl) { curParent = tl[p].target.parentNode; while (curParent) { if (curParent === parent) { a = a.concat(tl[p].tweens); } curParent = curParent.parentNode; } } l = a.length; for (i = 0; i < l; i++) { if (complete) { a[i].totalTime(a[i].totalDuration()); } a[i]._enabled(false, false); } }; var _changePause = function(pause, tweens, delayedCalls, timelines) { tweens = (tweens !== false); delayedCalls = (delayedCalls !== false); timelines = (timelines !== false); var a = getAllTweens(timelines), allTrue = (tweens && delayedCalls && timelines), i = a.length, isDC, tween; while (--i > -1) { tween = a[i]; if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) { tween.paused(pause); } } }; TweenMax.pauseAll = function(tweens, delayedCalls, timelines) { _changePause(true, tweens, delayedCalls, timelines); }; TweenMax.resumeAll = function(tweens, delayedCalls, timelines) { _changePause(false, tweens, delayedCalls, timelines); }; TweenMax.globalTimeScale = function(value) { var tl = Animation._rootTimeline, t = TweenLite.ticker.time; if (!arguments.length) { return tl._timeScale; } value = value || _tinyNum; //can't allow zero because it'll throw the math off tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value); tl = Animation._rootFramesTimeline; t = TweenLite.ticker.frame; tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value); tl._timeScale = Animation._rootTimeline._timeScale = value; return value; }; //---- GETTERS / SETTERS ---------------------------------------------------------------------------------------------------------- p.progress = function(value, suppressEvents) { return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents); }; p.totalProgress = function(value, suppressEvents) { return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, suppressEvents); }; p.time = function(value, suppressEvents) { if (!arguments.length) { return this._time; } if (this._dirty) { this.totalDuration(); } if (value > this._duration) { value = this._duration; } if (this._yoyo && (this._cycle & 1) !== 0) { value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay)); } else if (this._repeat !== 0) { value += this._cycle * (this._duration + this._repeatDelay); } return this.totalTime(value, suppressEvents); }; p.duration = function(value) { if (!arguments.length) { return this._duration; //don't set _dirty = false because there could be repeats that haven't been factored into the _totalDuration yet. Otherwise, if you create a repeated TweenMax and then immediately check its duration(), it would cache the value and the totalDuration would not be correct, thus repeats wouldn't take effect. } return Animation.prototype.duration.call(this, value); }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { //instead of Infinity, we use 999999999999 so that we can accommodate reverses this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat); this._dirty = false; } return this._totalDuration; } return (this._repeat === -1) ? this : this.duration( (value - (this._repeat * this._repeatDelay)) / (this._repeat + 1) ); }; p.repeat = function(value) { if (!arguments.length) { return this._repeat; } this._repeat = value; return this._uncache(true); }; p.repeatDelay = function(value) { if (!arguments.length) { return this._repeatDelay; } this._repeatDelay = value; return this._uncache(true); }; p.yoyo = function(value) { if (!arguments.length) { return this._yoyo; } this._yoyo = value; return this; }; return TweenMax; }, true); /* * ---------------------------------------------------------------- * TimelineLite * ---------------------------------------------------------------- */ _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) { var TimelineLite = function(vars) { SimpleTimeline.call(this, vars); this._labels = {}; this.autoRemoveChildren = (this.vars.autoRemoveChildren === true); this.smoothChildTiming = (this.vars.smoothChildTiming === true); this._sortChildren = true; this._onUpdate = this.vars.onUpdate; var v = this.vars, val, p; for (p in v) { val = v[p]; if (_isArray(val)) if (val.join("").indexOf("{self}") !== -1) { v[p] = this._swapSelfInParams(val); } } Iif (_isArray(v.tweens)) { this.add(v.tweens, 0, v.align, v.stagger); } }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _internals = TimelineLite._internals = {}, _isSelector = TweenLiteInternals.isSelector, _isArray = TweenLiteInternals.isArray, _lazyTweens = TweenLiteInternals.lazyTweens, _lazyRender = TweenLiteInternals.lazyRender, _globals = _gsScope._gsDefine.globals, _copy = function(vars) { var copy = {}, p; for (p in vars) { copy[p] = vars[p]; } return copy; }, _applyCycle = function(vars, targets, i) { var alt = vars.cycle, p, val; for (p in alt) { val = alt[p]; vars[p] = (typeof(val) === "function") ? val(i, targets[i]) : val[i % val.length]; } delete vars.cycle; }, _pauseCallback = _internals.pauseCallback = function() {}, _slice = function(a) { //don't use [].slice because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, p = TimelineLite.prototype = new SimpleTimeline(); TimelineLite.version = "1.19.1"; p.constructor = TimelineLite; p.kill()._gc = p._forcingPlayhead = p._hasPause = false; /* might use later... //translates a local time inside an animation to the corresponding time on the root/global timeline, factoring in all nesting and timeScales. function localToGlobal(time, animation) { while (animation) { time = (time / animation._timeScale) + animation._startTime; animation = animation.timeline; } return time; } //translates the supplied time on the root/global timeline into the corresponding local time inside a particular animation, factoring in all nesting and timeScales function globalToLocal(time, animation) { var scale = 1; time -= localToGlobal(0, animation); while (animation) { scale *= animation._timeScale; animation = animation.timeline; } return time * scale; } */ p.to = function(target, duration, vars, position) { var Engine = (vars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( new Engine(target, duration, vars), position) : this.set(target, vars, position); }; p.from = function(target, duration, vars, position) { return this.add( ((vars.repeat && _globals.TweenMax) || TweenLite).from(target, duration, vars), position); }; p.fromTo = function(target, duration, fromVars, toVars, position) { var Engine = (toVars.repeat && _globals.TweenMax) || TweenLite; return duration ? this.add( Engine.fromTo(target, duration, fromVars, toVars), position) : this.set(target, toVars, position); }; p.staggerTo = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { var tl = new TimelineLite({onComplete:onCompleteAll, onCompleteParams:onCompleteAllParams, callbackScope:onCompleteAllScope, smoothChildTiming:this.smoothChildTiming}), cycle = vars.cycle, copy, i; if (typeof(targets) === "string") { targets = TweenLite.selector(targets) || targets; } targets = targets || []; if (_isSelector(targets)) { //senses if the targets object is a selector. If it is, we should translate it into an array. targets = _slice(targets); } stagger = stagger || 0; if (stagger < 0) { targets = _slice(targets); targets.reverse(); stagger *= -1; } for (i = 0; i < targets.length; i++) { copy = _copy(vars); if (copy.startAt) { copy.startAt = _copy(copy.startAt); if (copy.startAt.cycle) { _applyCycle(copy.startAt, targets, i); } } if (cycle) { _applyCycle(copy, targets, i); if (copy.duration != null) { duration = copy.duration; delete copy.duration; } } tl.to(targets[i], duration, copy, i * stagger); } return this.add(tl, position); }; p.staggerFrom = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { vars.immediateRender = (vars.immediateRender != false); vars.runBackwards = true; return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.staggerFromTo = function(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope); }; p.call = function(callback, params, scope, position) { return this.add( TweenLite.delayedCall(0, callback, params, scope), position); }; p.set = function(target, vars, position) { position = this._parseTimeOrLabel(position, 0, true); if (vars.immediateRender == null) { vars.immediateRender = (position === this._time && !this._paused); } return this.add( new TweenLite(target, 0, vars), position); }; TimelineLite.exportRoot = function(vars, ignoreDelayedCalls) { vars = vars || {}; if (vars.smoothChildTiming == null) { vars.smoothChildTiming = true; } var tl = new TimelineLite(vars), root = tl._timeline, tween, next; if (ignoreDelayedCalls == null) { ignoreDelayedCalls = true; } root._remove(tl, true); tl._startTime = 0; tl._rawPrevTime = tl._time = tl._totalTime = root._time; tween = root._first; while (tween) { next = tween._next; if (!ignoreDelayedCalls || !(tween instanceof TweenLite && tween.target === tween.vars.onComplete)) { tl.add(tween, tween._startTime - tween._delay); } tween = next; } root.add(tl, 0); return tl; }; p.add = function(value, position, align, stagger) { var curTime, l, i, child, tl, beforeRawTime; if (typeof(position) !== "number") { position = this._parseTimeOrLabel(position, 0, true, value); } if (!(value instanceof Animation)) { if ((value instanceof Array) || (value && value.push && _isArray(value))) { align = align || "normal"; stagger = stagger || 0; curTime = position; l = value.length; for (i = 0; i < l; i++) { if (_isArray(child = value[i])) { child = new TimelineLite({tweens:child}); } this.add(child, curTime); if (typeof(child) !== "string" && typeof(child) !== "function") { if (align === "sequence") { curTime = child._startTime + (child.totalDuration() / child._timeScale); } else if (align === "start") { child._startTime -= child.delay(); } } curTime += stagger; } return this._uncache(true); } else if (typeof(value) === "string") { return this.addLabel(value, position); } else if (typeof(value) === "function") { value = TweenLite.delayedCall(0, value); } else { throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string."); } } SimpleTimeline.prototype.add.call(this, value, position); //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate. if (this._gc || this._time === this._duration) if (!this._paused) if (this._duration < this.duration()) { //in case any of the ancestors had completed but should now be enabled... tl = this; beforeRawTime = (tl.rawTime() > value._startTime); //if the tween is placed on the timeline so that it starts BEFORE the current rawTime, we should align the playhead (move the timeline). This is because sometimes users will create a timeline, let it finish, and much later append a tween and expect it to run instead of jumping to its end state. While technically one could argue that it should jump to its end state, that's not what users intuitively expect. while (tl._timeline) { if (beforeRawTime && tl._timeline.smoothChildTiming) { tl.totalTime(tl._totalTime, true); //moves the timeline (shifts its startTime) if necessary, and also enables it. } else if (tl._gc) { tl._enabled(true, false); } tl = tl._timeline; } } return this; }; p.remove = function(value) { if (value instanceof Animation) { this._remove(value, false); var tl = value._timeline = value.vars.useFrames ? Animation._rootFramesTimeline : Animation._rootTimeline; //now that it's removed, default it to the root timeline so that if it gets played again, it doesn't jump back into this timeline. value._startTime = (value._paused ? value._pauseTime : tl._time) - ((!value._reversed ? value._totalTime : value.totalDuration() - value._totalTime) / value._timeScale); //ensure that if it gets played again, the timing is correct. return this; } else if (value instanceof Array || (value && value.push && _isArray(value))) { var i = value.length; while (--i > -1) { this.remove(value[i]); } return this; } else if (typeof(value) === "string") { return this.removeLabel(value); } return this.kill(null, value); }; p._remove = function(tween, skipDisable) { SimpleTimeline.prototype._remove.call(this, tween, skipDisable); var last = this._last; if (!last) { this._time = this._totalTime = this._duration = this._totalDuration = 0; } else if (this._time > this.duration()) { this._time = this._duration; this._totalTime = this._totalDuration; } return this; }; p.append = function(value, offsetOrLabel) { return this.add(value, this._parseTimeOrLabel(null, offsetOrLabel, true, value)); }; p.insert = p.insertMultiple = function(value, position, align, stagger) { return this.add(value, position || 0, align, stagger); }; p.appendMultiple = function(tweens, offsetOrLabel, align, stagger) { return this.add(tweens, this._parseTimeOrLabel(null, offsetOrLabel, true, tweens), align, stagger); }; p.addLabel = function(label, position) { this._labels[label] = this._parseTimeOrLabel(position); return this; }; p.addPause = function(position, callback, params, scope) { var t = TweenLite.delayedCall(0, _pauseCallback, params, scope || this); t.vars.onComplete = t.vars.onReverseComplete = callback; t.data = "isPause"; this._hasPause = true; return this.add(t, position); }; p.removeLabel = function(label) { delete this._labels[label]; return this; }; p.getLabelTime = function(label) { return (this._labels[label] != null) ? this._labels[label] : -1; }; p._parseTimeOrLabel = function(timeOrLabel, offsetOrLabel, appendIfAbsent, ignore) { var i; //if we're about to add a tween/timeline (or an array of them) that's already a child of this timeline, we should remove it first so that it doesn't contaminate the duration(). if (ignore instanceof Animation && ignore.timeline === this) { this.remove(ignore); } else if (ignore && ((ignore instanceof Array) || (ignore.push && _isArray(ignore)))) { i = ignore.length; while (--i > -1) { if (ignore[i] instanceof Animation && ignore[i].timeline === this) { this.remove(ignore[i]); } } } if (typeof(offsetOrLabel) === "string") { return this._parseTimeOrLabel(offsetOrLabel, (appendIfAbsent && typeof(timeOrLabel) === "number" && this._labels[offsetOrLabel] == null) ? timeOrLabel - this.duration() : 0, appendIfAbsent); } offsetOrLabel = offsetOrLabel || 0; if (typeof(timeOrLabel) === "string" && (isNaN(timeOrLabel) || this._labels[timeOrLabel] != null)) { //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value). i = timeOrLabel.indexOf("="); if (i === -1) { if (this._labels[timeOrLabel] == null) { return appendIfAbsent ? (this._labels[timeOrLabel] = this.duration() + offsetOrLabel) : offsetOrLabel; } return this._labels[timeOrLabel] + offsetOrLabel; } offsetOrLabel = parseInt(timeOrLabel.charAt(i-1) + "1", 10) * Number(timeOrLabel.substr(i+1)); timeOrLabel = (i > 1) ? this._parseTimeOrLabel(timeOrLabel.substr(0, i-1), 0, appendIfAbsent) : this.duration(); } else if (timeOrLabel == null) { timeOrLabel = this.duration(); } return Number(timeOrLabel) + offsetOrLabel; }; p.seek = function(position, suppressEvents) { return this.totalTime((typeof(position) === "number") ? position : this._parseTimeOrLabel(position), (suppressEvents !== false)); }; p.stop = function() { return this.paused(true); }; p.gotoAndPlay = function(position, suppressEvents) { return this.play(position, suppressEvents); }; p.gotoAndStop = function(position, suppressEvents) { return this.pause(position, suppressEvents); }; p.render = function(time, suppressEvents, force) { if (this._gc) { this._enabled(true, false); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), prevTime = this._time, prevStart = this._startTime, prevTimeScale = this._timeScale, prevPaused = this._paused, tween, isComplete, next, callback, internalForce, pauseTween, curTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = this._time = totalDur; if (!this._reversed) if (!this._hasPausedChild()) { isComplete = true; callback = "onComplete"; internalForce = !!this._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. if (this._duration === 0) if ((time <= 0 && time >= -0.0000001) || this._rawPrevTime < 0 || this._rawPrevTime === _tinyNum) if (this._rawPrevTime !== time && this._first) { internalForce = true; if (this._rawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } } this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. time = totalDur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = 0; if (prevTime !== 0 || (this._duration === 0 && this._rawPrevTime !== _tinyNum && (this._rawPrevTime > 0 || (time < 0 && this._rawPrevTime >= 0)))) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (this._timeline.autoRemoveChildren && this._reversed) { //ensures proper GC if a timeline is resumed after it's finished reversing. internalForce = isComplete = true; callback = "onReverseComplete"; } else if (this._rawPrevTime >= 0 && this._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state. internalForce = true; } this._rawPrevTime = time; } else { this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good). tween = this._first; while (tween && tween._startTime === 0) { if (!tween._duration) { isComplete = false; } tween = tween._next; } } time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline) if (!this._initted) { internalForce = true; } } } else { if (this._hasPause && !this._forcingPlayhead && !suppressEvents) { if (time >= prevTime) { tween = this._first; while (tween && tween._startTime <= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && this._rawPrevTime === 0)) { pauseTween = tween; } tween = tween._next; } } else { tween = this._last; while (tween && tween._startTime >= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) { pauseTween = tween; } tween = tween._prev; } } if (pauseTween) { this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } } this._totalTime = this._time = this._rawPrevTime = time; } if ((this._time === prevTime || !this._first) && !force && !internalForce && !pauseTween) { return; } else if (!this._initted) { this._initted = true; } if (!this._active) if (!this._paused && this._time !== prevTime && time > 0) { this._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example. } if (prevTime === 0) if (this.vars.onStart) if (this._time !== 0 || !this._duration) if (!suppressEvents) { this._callback("onStart"); } curTime = this._time; if (curTime >= prevTime) { tween = this._first; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= curTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } else { tween = this._last; while (tween) { next = tween._prev; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse. while (pauseTween && pauseTween.endTime() > this._time) { pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force); pauseTween = pauseTween._prev; } pauseTween = null; this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } if (this._onUpdate) if (!suppressEvents) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values. _lazyRender(); } this._callback("onUpdate"); } if (callback) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate if (isComplete) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values. _lazyRender(); } if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } } }; p._hasPausedChild = function() { var tween = this._first; while (tween) { if (tween._paused || ((tween instanceof TimelineLite) && tween._hasPausedChild())) { return true; } tween = tween._next; } return false; }; p.getChildren = function(nested, tweens, timelines, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || -9999999999; var a = [], tween = this._first, cnt = 0; while (tween) { if (tween._startTime < ignoreBeforeTime) { //do nothing } else if (tween instanceof TweenLite) { if (tweens !== false) { a[cnt++] = tween; } } else { if (timelines !== false) { a[cnt++] = tween; } if (nested !== false) { a = a.concat(tween.getChildren(true, tweens, timelines)); cnt = a.length; } } tween = tween._next; } return a; }; p.getTweensOf = function(target, nested) { var disabled = this._gc, a = [], cnt = 0, tweens, i; if (disabled) { this._enabled(true, true); //getTweensOf() filters out disabled tweens, and we have to mark them as _gc = true when the timeline completes in order to allow clean garbage collection, so temporarily re-enable the timeline here. } tweens = TweenLite.getTweensOf(target); i = tweens.length; while (--i > -1) { if (tweens[i].timeline === this || (nested && this._contains(tweens[i]))) { a[cnt++] = tweens[i]; } } if (disabled) { this._enabled(false, true); } return a; }; p.recent = function() { return this._recent; }; p._contains = function(tween) { var tl = tween.timeline; while (tl) { if (tl === this) { return true; } tl = tl.timeline; } return false; }; p.shiftChildren = function(amount, adjustLabels, ignoreBeforeTime) { ignoreBeforeTime = ignoreBeforeTime || 0; var tween = this._first, labels = this._labels, p; while (tween) { if (tween._startTime >= ignoreBeforeTime) { tween._startTime += amount; } tween = tween._next; } if (adjustLabels) { for (p in labels) { if (labels[p] >= ignoreBeforeTime) { labels[p] += amount; } } } return this._uncache(true); }; p._kill = function(vars, target) { Eif (!vars && !target) { return this._enabled(false, false); } var tweens = (!target) ? this.getChildren(true, true, false) : this.getTweensOf(target), i = tweens.length, changed = false; while (--i > -1) { if (tweens[i]._kill(vars, target)) { changed = true; } } return changed; }; p.clear = function(labels) { var tweens = this.getChildren(false, true, true), i = tweens.length; this._time = this._totalTime = 0; while (--i > -1) { tweens[i]._enabled(false, false); } if (labels !== false) { this._labels = {}; } return this._uncache(true); }; p.invalidate = function() { var tween = this._first; while (tween) { tween.invalidate(); tween = tween._next; } return Animation.prototype.invalidate.call(this);; }; p._enabled = function(enabled, ignoreTimeline) { Eif (enabled === this._gc) { var tween = this._first; while (tween) { tween._enabled(enabled, true); tween = tween._next; } } return SimpleTimeline.prototype._enabled.call(this, enabled, ignoreTimeline); }; p.totalTime = function(time, suppressEvents, uncapped) { this._forcingPlayhead = true; var val = Animation.prototype.totalTime.apply(this, arguments); this._forcingPlayhead = false; return val; }; p.duration = function(value) { if (!arguments.length) { if (this._dirty) { this.totalDuration(); //just triggers recalculation } return this._duration; } if (this.duration() !== 0 && value !== 0) { this.timeScale(this._duration / value); } return this; }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { var max = 0, tween = this._last, prevStart = 999999999999, prev, end; while (tween) { prev = tween._prev; //record it here in case the tween changes position in the sequence... if (tween._dirty) { tween.totalDuration(); //could change the tween._startTime, so make sure the tween's cache is clean before analyzing it. } if (tween._startTime > prevStart && this._sortChildren && !tween._paused) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence this.add(tween, tween._startTime - tween._delay); } else { prevStart = tween._startTime; } if (tween._startTime < 0 && !tween._paused) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found. max -= tween._startTime; if (this._timeline.smoothChildTiming) { this._startTime += tween._startTime / this._timeScale; } this.shiftChildren(-tween._startTime, false, -9999999999); prevStart = 0; } end = tween._startTime + (tween._totalDuration / tween._timeScale); if (end > max) { max = end; } tween = prev; } this._duration = this._totalDuration = max; this._dirty = false; } return this._totalDuration; } return (value && this.totalDuration()) ? this.timeScale(this._totalDuration / value) : this; }; p.paused = function(value) { if (!value) { //if there's a pause directly at the spot from where we're unpausing, skip it. var tween = this._first, time = this._time; while (tween) { if (tween._startTime === time && tween.data === "isPause") { tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire. } tween = tween._next; } } return Animation.prototype.paused.apply(this, arguments); }; p.usesFrames = function() { var tl = this._timeline; while (tl._timeline) { tl = tl._timeline; } return (tl === Animation._rootFramesTimeline); }; p.rawTime = function(wrapRepeats) { return (wrapRepeats && (this._paused || (this._repeat && this.time() > 0 && this.totalProgress() < 1))) ? this._totalTime % (this._duration + this._repeatDelay) : this._paused ? this._totalTime : (this._timeline.rawTime(wrapRepeats) - this._startTime) * this._timeScale; }; return TimelineLite; }, true); /* * ---------------------------------------------------------------- * TimelineMax * ---------------------------------------------------------------- */ _gsScope._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], function(TimelineLite, TweenLite, Ease) { var TimelineMax = function(vars) { TimelineLite.call(this, vars); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._cycle = 0; this._yoyo = (this.vars.yoyo === true); this._dirty = true; }, _tinyNum = 0.0000000001, TweenLiteInternals = TweenLite._internals, _lazyTweens = TweenLiteInternals.lazyTweens, _lazyRender = TweenLiteInternals.lazyRender, _globals = _gsScope._gsDefine.globals, _easeNone = new Ease(null, null, 1, 0), p = TimelineMax.prototype = new TimelineLite(); p.constructor = TimelineMax; p.kill()._gc = false; TimelineMax.version = "1.19.1"; p.invalidate = function() { this._yoyo = (this.vars.yoyo === true); this._repeat = this.vars.repeat || 0; this._repeatDelay = this.vars.repeatDelay || 0; this._uncache(true); return TimelineLite.prototype.invalidate.call(this); }; p.addCallback = function(callback, position, params, scope) { return this.add( TweenLite.delayedCall(0, callback, params, scope), position); }; p.removeCallback = function(callback, position) { if (callback) { if (position == null) { this._kill(null, callback); } else { var a = this.getTweensOf(callback, false), i = a.length, time = this._parseTimeOrLabel(position); while (--i > -1) { if (a[i]._startTime === time) { a[i]._enabled(false, false); } } } } return this; }; p.removePause = function(position) { return this.removeCallback(TimelineLite._internals.pauseCallback, position); }; p.tweenTo = function(position, vars) { vars = vars || {}; var copy = {ease:_easeNone, useFrames:this.usesFrames(), immediateRender:false}, Engine = (vars.repeat && _globals.TweenMax) || TweenLite, duration, p, t; for (p in vars) { copy[p] = vars[p]; } copy.time = this._parseTimeOrLabel(position); duration = (Math.abs(Number(copy.time) - this._time) / this._timeScale) || 0.001; t = new Engine(this, duration, copy); copy.onStart = function() { t.target.paused(true); if (t.vars.time !== t.target.time() && duration === t.duration()) { //don't make the duration zero - if it's supposed to be zero, don't worry because it's already initting the tween and will complete immediately, effectively making the duration zero anyway. If we make duration zero, the tween won't run at all. t.duration( Math.abs( t.vars.time - t.target.time()) / t.target._timeScale ); } if (vars.onStart) { //in case the user had an onStart in the vars - we don't want to overwrite it. vars.onStart.apply(vars.onStartScope || vars.callbackScope || t, vars.onStartParams || []); //don't use t._callback("onStart") or it'll point to the copy.onStart and we'll get a recursion error. } }; return t; }; p.tweenFromTo = function(fromPosition, toPosition, vars) { vars = vars || {}; fromPosition = this._parseTimeOrLabel(fromPosition); vars.startAt = {onComplete:this.seek, onCompleteParams:[fromPosition], callbackScope:this}; vars.immediateRender = (vars.immediateRender !== false); var t = this.tweenTo(toPosition, vars); return t.duration((Math.abs( t.vars.time - fromPosition) / this._timeScale) || 0.001); }; p.render = function(time, suppressEvents, force) { if (this._gc) { this._enabled(true, false); } var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(), dur = this._duration, prevTime = this._time, prevTotalTime = this._totalTime, prevStart = this._startTime, prevTimeScale = this._timeScale, prevRawPrevTime = this._rawPrevTime, prevPaused = this._paused, prevCycle = this._cycle, tween, isComplete, next, callback, internalForce, cycleDuration, pauseTween, curTime; if (time >= totalDur - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. if (!this._locked) { this._totalTime = totalDur; this._cycle = this._repeat; } if (!this._reversed) if (!this._hasPausedChild()) { isComplete = true; callback = "onComplete"; internalForce = !!this._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. if (this._duration === 0) if ((time <= 0 && time >= -0.0000001) || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time && this._first) { internalForce = true; if (prevRawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } } this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (this._yoyo && (this._cycle & 1) !== 0) { this._time = time = 0; } else { this._time = dur; time = dur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. We cannot do less then 0.0001 because the same issue can occur when the duration is extremely large like 999999999999 in which case adding 0.00000001, for example, causes it to act like nothing was added. } } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. if (!this._locked) { this._totalTime = this._cycle = 0; } this._time = 0; if (prevTime !== 0 || (dur === 0 && prevRawPrevTime !== _tinyNum && (prevRawPrevTime > 0 || (time < 0 && prevRawPrevTime >= 0)) && !this._locked)) { //edge case for checking time < 0 && prevRawPrevTime >= 0: a zero-duration fromTo() tween inside a zero-duration timeline (yeah, very rare) callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (this._timeline.autoRemoveChildren && this._reversed) { internalForce = isComplete = true; callback = "onReverseComplete"; } else if (prevRawPrevTime >= 0 && this._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state. internalForce = true; } this._rawPrevTime = time; } else { this._rawPrevTime = (dur || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good). tween = this._first; while (tween && tween._startTime === 0) { if (!tween._duration) { isComplete = false; } tween = tween._next; } } time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline) if (!this._initted) { internalForce = true; } } } else { if (dur === 0 && prevRawPrevTime < 0) { //without this, zero-duration repeating timelines (like with a simple callback nested at the very beginning and a repeatDelay) wouldn't render the first time through. internalForce = true; } this._time = this._rawPrevTime = time; if (!this._locked) { this._totalTime = time; if (this._repeat !== 0) { cycleDuration = dur + this._repeatDelay; this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but it gets reported as 0.79999999!) if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration && prevTotalTime <= time) { this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning) } this._time = this._totalTime - (this._cycle * cycleDuration); if (this._yoyo) if ((this._cycle & 1) !== 0) { this._time = dur - this._time; } if (this._time > dur) { this._time = dur; time = dur + 0.0001; //to avoid occasional floating point rounding error } else if (this._time < 0) { this._time = time = 0; } else { time = this._time; } } } if (this._hasPause && !this._forcingPlayhead && !suppressEvents && time < dur) { time = this._time; if (time >= prevTime || (this._repeat && prevCycle !== this._cycle)) { tween = this._first; while (tween && tween._startTime <= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && this._rawPrevTime === 0)) { pauseTween = tween; } tween = tween._next; } } else { tween = this._last; while (tween && tween._startTime >= time && !pauseTween) { if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) { pauseTween = tween; } tween = tween._prev; } } if (pauseTween) { this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } } } if (this._cycle !== prevCycle) if (!this._locked) { /* make sure children at the end/beginning of the timeline are rendered properly. If, for example, a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which would get transated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must ensure that zero-duration tweens at the very beginning or end of the TimelineMax work. */ var backwards = (this._yoyo && (prevCycle & 1) !== 0), wrap = (backwards === (this._yoyo && (this._cycle & 1) !== 0)), recTotalTime = this._totalTime, recCycle = this._cycle, recRawPrevTime = this._rawPrevTime, recTime = this._time; this._totalTime = prevCycle * dur; if (this._cycle < prevCycle) { backwards = !backwards; } else { this._totalTime += dur; } this._time = prevTime; //temporarily revert _time so that render() renders the children in the correct order. Without this, tweens won't rewind correctly. We could arhictect things in a "cleaner" way by splitting out the rendering queue into a separate method but for performance reasons, we kept it all inside this method. this._rawPrevTime = (dur === 0) ? prevRawPrevTime - 0.0001 : prevRawPrevTime; this._cycle = prevCycle; this._locked = true; //prevents changes to totalTime and skips repeat/yoyo behavior when we recursively call render() prevTime = (backwards) ? 0 : dur; this.render(prevTime, suppressEvents, (dur === 0)); if (!suppressEvents) if (!this._gc) { if (this.vars.onRepeat) { this._cycle = recCycle; //in case the onRepeat alters the playhead or invalidates(), we shouldn't stay locked or use the previous cycle. this._locked = false; this._callback("onRepeat"); } } if (prevTime !== this._time) { //in case there's a callback like onComplete in a nested tween/timeline that changes the playhead position, like via seek(), we should just abort. return; } if (wrap) { this._cycle = prevCycle; //if there's an onRepeat, we reverted this above, so make sure it's set properly again. We also unlocked in that scenario, so reset that too. this._locked = true; prevTime = (backwards) ? dur + 0.0001 : -0.0001; this.render(prevTime, true, false); } this._locked = false; if (this._paused && !prevPaused) { //if the render() triggered callback that paused this timeline, we should abort (very rare, but possible) return; } this._time = recTime; this._totalTime = recTotalTime; this._cycle = recCycle; this._rawPrevTime = recRawPrevTime; } if ((this._time === prevTime || !this._first) && !force && !internalForce && !pauseTween) { if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate. this._callback("onUpdate"); } return; } else if (!this._initted) { this._initted = true; } if (!this._active) if (!this._paused && this._totalTime !== prevTotalTime && time > 0) { this._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example. } if (prevTotalTime === 0) if (this.vars.onStart) if (this._totalTime !== 0 || !this._totalDuration) if (!suppressEvents) { this._callback("onStart"); } curTime = this._time; if (curTime >= prevTime) { tween = this._first; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= this._time && !tween._paused && !tween._gc)) { if (pauseTween === tween) { this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } else { tween = this._last; while (tween) { next = tween._prev; //record it here because the value could change after rendering... if (curTime !== this._time || (this._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete break; } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) { if (pauseTween === tween) { pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse. while (pauseTween && pauseTween.endTime() > this._time) { pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force); pauseTween = pauseTween._prev; } pauseTween = null; this.pause(); } if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } } if (this._onUpdate) if (!suppressEvents) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values. _lazyRender(); } this._callback("onUpdate"); } if (callback) if (!this._locked) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate if (isComplete) { if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values. _lazyRender(); } if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } } }; p.getActive = function(nested, tweens, timelines) { if (nested == null) { nested = true; } if (tweens == null) { tweens = true; } if (timelines == null) { timelines = false; } var a = [], all = this.getChildren(nested, tweens, timelines), cnt = 0, l = all.length, i, tween; for (i = 0; i < l; i++) { tween = all[i]; if (tween.isActive()) { a[cnt++] = tween; } } return a; }; p.getLabelAfter = function(time) { if (!time) if (time !== 0) { //faster than isNan() time = this._time; } var labels = this.getLabelsArray(), l = labels.length, i; for (i = 0; i < l; i++) { if (labels[i].time > time) { return labels[i].name; } } return null; }; p.getLabelBefore = function(time) { if (time == null) { time = this._time; } var labels = this.getLabelsArray(), i = labels.length; while (--i > -1) { if (labels[i].time < time) { return labels[i].name; } } return null; }; p.getLabelsArray = function() { var a = [], cnt = 0, p; for (p in this._labels) { a[cnt++] = {time:this._labels[p], name:p}; } a.sort(function(a,b) { return a.time - b.time; }); return a; }; p.invalidate = function() { this._locked = false; //unlock and set cycle in case invalidate() is called from inside an onRepeat return TimelineLite.prototype.invalidate.call(this); }; //---- GETTERS / SETTERS ------------------------------------------------------------------------------------------------------- p.progress = function(value, suppressEvents) { return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents); }; p.totalProgress = function(value, suppressEvents) { return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, suppressEvents); }; p.totalDuration = function(value) { if (!arguments.length) { if (this._dirty) { TimelineLite.prototype.totalDuration.call(this); //just forces refresh //Instead of Infinity, we use 999999999999 so that we can accommodate reverses. this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat); } return this._totalDuration; } return (this._repeat === -1 || !value) ? this : this.timeScale( this.totalDuration() / value ); }; p.time = function(value, suppressEvents) { if (!arguments.length) { return this._time; } if (this._dirty) { this.totalDuration(); } if (value > this._duration) { value = this._duration; } if (this._yoyo && (this._cycle & 1) !== 0) { value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay)); } else if (this._repeat !== 0) { value += this._cycle * (this._duration + this._repeatDelay); } return this.totalTime(value, suppressEvents); }; p.repeat = function(value) { if (!arguments.length) { return this._repeat; } this._repeat = value; return this._uncache(true); }; p.repeatDelay = function(value) { if (!arguments.length) { return this._repeatDelay; } this._repeatDelay = value; return this._uncache(true); }; p.yoyo = function(value) { if (!arguments.length) { return this._yoyo; } this._yoyo = value; return this; }; p.currentLabel = function(value) { if (!arguments.length) { return this.getLabelBefore(this._time + 0.00000001); } return this.seek(value, true); }; return TimelineMax; }, true); /* * ---------------------------------------------------------------- * BezierPlugin * ---------------------------------------------------------------- */ (function() { var _RAD2DEG = 180 / Math.PI, _r1 = [], _r2 = [], _r3 = [], _corProps = {}, _globals = _gsScope._gsDefine.globals, Segment = function(a, b, c, d) { if (c === d) { //if c and d match, the final autoRotate value could lock at -90 degrees, so differentiate them slightly. c = d - (d - b) / 1000000; } if (a === b) { //if a and b match, the starting autoRotate value could lock at -90 degrees, so differentiate them slightly. b = a + (c - a) / 1000000; } this.a = a; this.b = b; this.c = c; this.d = d; this.da = d - a; this.ca = c - a; this.ba = b - a; }, _correlate = ",x,y,z,left,top,right,bottom,marginTop,marginLeft,marginRight,marginBottom,paddingLeft,paddingTop,paddingRight,paddingBottom,backgroundPosition,backgroundPosition_y,", cubicToQuadratic = function(a, b, c, d) { var q1 = {a:a}, q2 = {}, q3 = {}, q4 = {c:d}, mab = (a + b) / 2, mbc = (b + c) / 2, mcd = (c + d) / 2, mabc = (mab + mbc) / 2, mbcd = (mbc + mcd) / 2, m8 = (mbcd - mabc) / 8; q1.b = mab + (a - mab) / 4; q2.b = mabc + m8; q1.c = q2.a = (q1.b + q2.b) / 2; q2.c = q3.a = (mabc + mbcd) / 2; q3.b = mbcd - m8; q4.b = mcd + (d - mcd) / 4; q3.c = q4.a = (q3.b + q4.b) / 2; return [q1, q2, q3, q4]; }, _calculateControlPoints = function(a, curviness, quad, basic, correlate) { var l = a.length - 1, ii = 0, cp1 = a[0].a, i, p1, p2, p3, seg, m1, m2, mm, cp2, qb, r1, r2, tl; for (i = 0; i < l; i++) { seg = a[ii]; p1 = seg.a; p2 = seg.d; p3 = a[ii+1].d; if (correlate) { r1 = _r1[i]; r2 = _r2[i]; tl = ((r2 + r1) * curviness * 0.25) / (basic ? 0.5 : _r3[i] || 0.5); m1 = p2 - (p2 - p1) * (basic ? curviness * 0.5 : (r1 !== 0 ? tl / r1 : 0)); m2 = p2 + (p3 - p2) * (basic ? curviness * 0.5 : (r2 !== 0 ? tl / r2 : 0)); mm = p2 - (m1 + (((m2 - m1) * ((r1 * 3 / (r1 + r2)) + 0.5) / 4) || 0)); } else { m1 = p2 - (p2 - p1) * curviness * 0.5; m2 = p2 + (p3 - p2) * curviness * 0.5; mm = p2 - (m1 + m2) / 2; } m1 += mm; m2 += mm; seg.c = cp2 = m1; if (i !== 0) { seg.b = cp1; } else { seg.b = cp1 = seg.a + (seg.c - seg.a) * 0.6; //instead of placing b on a exactly, we move it inline with c so that if the user specifies an ease like Back.easeIn or Elastic.easeIn which goes BEYOND the beginning, it will do so smoothly. } seg.da = p2 - p1; seg.ca = cp2 - p1; seg.ba = cp1 - p1; if (quad) { qb = cubicToQuadratic(p1, cp1, cp2, p2); a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]); ii += 4; } else { ii++; } cp1 = m2; } seg = a[ii]; seg.b = cp1; seg.c = cp1 + (seg.d - cp1) * 0.4; //instead of placing c on d exactly, we move it inline with b so that if the user specifies an ease like Back.easeOut or Elastic.easeOut which goes BEYOND the end, it will do so smoothly. seg.da = seg.d - seg.a; seg.ca = seg.c - seg.a; seg.ba = cp1 - seg.a; if (quad) { qb = cubicToQuadratic(seg.a, cp1, seg.c, seg.d); a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]); } }, _parseAnchors = function(values, p, correlate, prepend) { var a = [], l, i, p1, p2, p3, tmp; if (prepend) { values = [prepend].concat(values); i = values.length; while (--i > -1) { if (typeof( (tmp = values[i][p]) ) === "string") if (tmp.charAt(1) === "=") { values[i][p] = prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)); //accommodate relative values. Do it inline instead of breaking it out into a function for speed reasons } } } l = values.length - 2; if (l < 0) { a[0] = new Segment(values[0][p], 0, 0, values[(l < -1) ? 0 : 1][p]); return a; } for (i = 0; i < l; i++) { p1 = values[i][p]; p2 = values[i+1][p]; a[i] = new Segment(p1, 0, 0, p2); if (correlate) { p3 = values[i+2][p]; _r1[i] = (_r1[i] || 0) + (p2 - p1) * (p2 - p1); _r2[i] = (_r2[i] || 0) + (p3 - p2) * (p3 - p2); } } a[i] = new Segment(values[i][p], 0, 0, values[i+1][p]); return a; }, bezierThrough = function(values, curviness, quadratic, basic, correlate, prepend) { var obj = {}, props = [], first = prepend || values[0], i, p, a, j, r, l, seamless, last; correlate = (typeof(correlate) === "string") ? ","+correlate+"," : _correlate; if (curviness == null) { curviness = 1; } for (p in values[0]) { props.push(p); } //check to see if the last and first values are identical (well, within 0.05). If so, make seamless by appending the second element to the very end of the values array and the 2nd-to-last element to the very beginning (we'll remove those segments later) if (values.length > 1) { last = values[values.length - 1]; seamless = true; i = props.length; while (--i > -1) { p = props[i]; if (Math.abs(first[p] - last[p]) > 0.05) { //build in a tolerance of +/-0.05 to accommodate rounding errors. seamless = false; break; } } if (seamless) { values = values.concat(); //duplicate the array to avoid contaminating the original which the user may be reusing for other tweens if (prepend) { values.unshift(prepend); } values.push(values[1]); prepend = values[values.length - 3]; } } _r1.length = _r2.length = _r3.length = 0; i = props.length; while (--i > -1) { p = props[i]; _corProps[p] = (correlate.indexOf(","+p+",") !== -1); obj[p] = _parseAnchors(values, p, _corProps[p], prepend); } i = _r1.length; while (--i > -1) { _r1[i] = Math.sqrt(_r1[i]); _r2[i] = Math.sqrt(_r2[i]); } if (!basic) { i = props.length; while (--i > -1) { if (_corProps[p]) { a = obj[props[i]]; l = a.length - 1; for (j = 0; j < l; j++) { r = (a[j+1].da / _r2[j] + a[j].da / _r1[j]) || 0; _r3[j] = (_r3[j] || 0) + r * r; } } } i = _r3.length; while (--i > -1) { _r3[i] = Math.sqrt(_r3[i]); } } i = props.length; j = quadratic ? 4 : 1; while (--i > -1) { p = props[i]; a = obj[p]; _calculateControlPoints(a, curviness, quadratic, basic, _corProps[p]); //this method requires that _parseAnchors() and _setSegmentRatios() ran first so that _r1, _r2, and _r3 values are populated for all properties if (seamless) { a.splice(0, j); a.splice(a.length - j, j); } } return obj; }, _parseBezierData = function(values, type, prepend) { type = type || "soft"; var obj = {}, inc = (type === "cubic") ? 3 : 2, soft = (type === "soft"), props = [], a, b, c, d, cur, i, j, l, p, cnt, tmp; if (soft && prepend) { values = [prepend].concat(values); } if (values == null || values.length < inc + 1) { throw "invalid Bezier data"; } for (p in values[0]) { props.push(p); } i = props.length; while (--i > -1) { p = props[i]; obj[p] = cur = []; cnt = 0; l = values.length; for (j = 0; j < l; j++) { a = (prepend == null) ? values[j][p] : (typeof( (tmp = values[j][p]) ) === "string" && tmp.charAt(1) === "=") ? prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)) : Number(tmp); if (soft) if (j > 1) if (j < l - 1) { cur[cnt++] = (a + cur[cnt-2]) / 2; } cur[cnt++] = a; } l = cnt - inc + 1; cnt = 0; for (j = 0; j < l; j += inc) { a = cur[j]; b = cur[j+1]; c = cur[j+2]; d = (inc === 2) ? 0 : cur[j+3]; cur[cnt++] = tmp = (inc === 3) ? new Segment(a, b, c, d) : new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c); } cur.length = cnt; } return obj; }, _addCubicLengths = function(a, steps, resolution) { var inc = 1 / resolution, j = a.length, d, d1, s, da, ca, ba, p, i, inv, bez, index; while (--j > -1) { bez = a[j]; s = bez.a; da = bez.d - s; ca = bez.c - s; ba = bez.b - s; d = d1 = 0; for (i = 1; i <= resolution; i++) { p = inc * i; inv = 1 - p; d = d1 - (d1 = (p * p * da + 3 * inv * (p * ca + inv * ba)) * p); index = j * resolution + i - 1; steps[index] = (steps[index] || 0) + d * d; } } }, _parseLengthData = function(obj, resolution) { resolution = resolution >> 0 || 6; var a = [], lengths = [], d = 0, total = 0, threshold = resolution - 1, segments = [], curLS = [], //current length segments array p, i, l, index; for (p in obj) { _addCubicLengths(obj[p], a, resolution); } l = a.length; for (i = 0; i < l; i++) { d += Math.sqrt(a[i]); index = i % resolution; curLS[index] = d; if (index === threshold) { total += d; index = (i / resolution) >> 0; segments[index] = curLS; lengths[index] = total; d = 0; curLS = []; } } return {length:total, lengths:lengths, segments:segments}; }, BezierPlugin = _gsScope._gsDefine.plugin({ propName: "bezier", priority: -1, version: "1.3.7", API: 2, global:true, //gets called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, vars, tween) { this._target = target; if (vars instanceof Array) { vars = {values:vars}; } this._func = {}; this._mod = {}; this._props = []; this._timeRes = (vars.timeResolution == null) ? 6 : parseInt(vars.timeResolution, 10); var values = vars.values || [], first = {}, second = values[0], autoRotate = vars.autoRotate || tween.vars.orientToBezier, p, isFunc, i, j, prepend; this._autoRotate = autoRotate ? (autoRotate instanceof Array) ? autoRotate : [["x","y","rotation",((autoRotate === true) ? 0 : Number(autoRotate) || 0)]] : null; for (p in second) { this._props.push(p); } i = this._props.length; while (--i > -1) { p = this._props[i]; this._overwriteProps.push(p); isFunc = this._func[p] = (typeof(target[p]) === "function"); first[p] = (!isFunc) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ](); if (!prepend) if (first[p] !== values[0][p]) { prepend = first; } } this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate, prepend) : _parseBezierData(values, vars.type, first); this._segCount = this._beziers[p].length; if (this._timeRes) { var ld = _parseLengthData(this._beziers, this._timeRes); this._length = ld.length; this._lengths = ld.lengths; this._segments = ld.segments; this._l1 = this._li = this._s1 = this._si = 0; this._l2 = this._lengths[0]; this._curSeg = this._segments[0]; this._s2 = this._curSeg[0]; this._prec = 1 / this._curSeg.length; } if ((autoRotate = this._autoRotate)) { this._initialRotations = []; if (!(autoRotate[0] instanceof Array)) { this._autoRotate = autoRotate = [autoRotate]; } i = autoRotate.length; while (--i > -1) { for (j = 0; j < 3; j++) { p = autoRotate[i][j]; this._func[p] = (typeof(target[p]) === "function") ? target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ] : false; } p = autoRotate[i][2]; this._initialRotations[i] = (this._func[p] ? this._func[p].call(this._target) : this._target[p]) || 0; this._overwriteProps.push(p); } } this._startRatio = tween.vars.runBackwards ? 1 : 0; //we determine the starting ratio when the tween inits which is always 0 unless the tween has runBackwards:true (indicating it's a from() tween) in which case it's 1. return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var segments = this._segCount, func = this._func, target = this._target, notStart = (v !== this._startRatio), curIndex, inv, i, p, b, t, val, l, lengths, curSeg; if (!this._timeRes) { curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0; t = (v - (curIndex * (1 / segments))) * segments; } else { lengths = this._lengths; curSeg = this._curSeg; v *= this._length; i = this._li; //find the appropriate segment (if the currently cached one isn't correct) if (v > this._l2 && i < segments - 1) { l = segments - 1; while (i < l && (this._l2 = lengths[++i]) <= v) { } this._l1 = lengths[i-1]; this._li = i; this._curSeg = curSeg = this._segments[i]; this._s2 = curSeg[(this._s1 = this._si = 0)]; } else if (v < this._l1 && i > 0) { while (i > 0 && (this._l1 = lengths[--i]) >= v) { } if (i === 0 && v < this._l1) { this._l1 = 0; } else { i++; } this._l2 = lengths[i]; this._li = i; this._curSeg = curSeg = this._segments[i]; this._s1 = curSeg[(this._si = curSeg.length - 1) - 1] || 0; this._s2 = curSeg[this._si]; } curIndex = i; //now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one) v -= this._l1; i = this._si; if (v > this._s2 && i < curSeg.length - 1) { l = curSeg.length - 1; while (i < l && (this._s2 = curSeg[++i]) <= v) { } this._s1 = curSeg[i-1]; this._si = i; } else if (v < this._s1 && i > 0) { while (i > 0 && (this._s1 = curSeg[--i]) >= v) { } if (i === 0 && v < this._s1) { this._s1 = 0; } else { i++; } this._s2 = curSeg[i]; this._si = i; } t = ((i + (v - this._s1) / (this._s2 - this._s1)) * this._prec) || 0; } inv = 1 - t; i = this._props.length; while (--i > -1) { p = this._props[i]; b = this._beziers[p][curIndex]; val = (t * t * b.da + 3 * inv * (t * b.ca + inv * b.ba)) * t + b.a; if (this._mod[p]) { val = this._mod[p](val, target); } if (func[p]) { target[p](val); } else { target[p] = val; } } if (this._autoRotate) { var ar = this._autoRotate, b2, x1, y1, x2, y2, add, conv; i = ar.length; while (--i > -1) { p = ar[i][2]; add = ar[i][3] || 0; conv = (ar[i][4] === true) ? 1 : _RAD2DEG; b = this._beziers[ar[i][0]]; b2 = this._beziers[ar[i][1]]; if (b && b2) { //in case one of the properties got overwritten. b = b[curIndex]; b2 = b2[curIndex]; x1 = b.a + (b.b - b.a) * t; x2 = b.b + (b.c - b.b) * t; x1 += (x2 - x1) * t; x2 += ((b.c + (b.d - b.c) * t) - x2) * t; y1 = b2.a + (b2.b - b2.a) * t; y2 = b2.b + (b2.c - b2.b) * t; y1 += (y2 - y1) * t; y2 += ((b2.c + (b2.d - b2.c) * t) - y2) * t; val = notStart ? Math.atan2(y2 - y1, x2 - x1) * conv + add : this._initialRotations[i]; if (this._mod[p]) { val = this._mod[p](val, target); //for modProps } if (func[p]) { target[p](val); } else { target[p] = val; } } } } } }), p = BezierPlugin.prototype; BezierPlugin.bezierThrough = bezierThrough; BezierPlugin.cubicToQuadratic = cubicToQuadratic; BezierPlugin._autoCSS = true; //indicates that this plugin can be inserted into the "css" object using the autoCSS feature of TweenLite BezierPlugin.quadraticToCubic = function(a, b, c) { return new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c); }; BezierPlugin._cssRegister = function() { var CSSPlugin = _globals.CSSPlugin; if (!CSSPlugin) { return; } var _internals = CSSPlugin._internals, _parseToProxy = _internals._parseToProxy, _setPluginRatio = _internals._setPluginRatio, CSSPropTween = _internals.CSSPropTween; _internals._registerComplexSpecialProp("bezier", {parser:function(t, e, prop, cssp, pt, plugin) { if (e instanceof Array) { e = {values:e}; } plugin = new BezierPlugin(); var values = e.values, l = values.length - 1, pluginValues = [], v = {}, i, p, data; if (l < 0) { return pt; } for (i = 0; i <= l; i++) { data = _parseToProxy(t, values[i], cssp, pt, plugin, (l !== i)); pluginValues[i] = data.end; } for (p in e) { v[p] = e[p]; //duplicate the vars object because we need to alter some things which would cause problems if the user plans to reuse the same vars object for another tween. } v.values = pluginValues; pt = new CSSPropTween(t, "bezier", 0, 0, data.pt, 2); pt.data = data; pt.plugin = plugin; pt.setRatio = _setPluginRatio; if (v.autoRotate === 0) { v.autoRotate = true; } if (v.autoRotate && !(v.autoRotate instanceof Array)) { i = (v.autoRotate === true) ? 0 : Number(v.autoRotate); v.autoRotate = (data.end.left != null) ? [["left","top","rotation",i,false]] : (data.end.x != null) ? [["x","y","rotation",i,false]] : false; } if (v.autoRotate) { if (!cssp._transform) { cssp._enableTransforms(false); } data.autoRotate = cssp._target._gsTransform; data.proxy.rotation = data.autoRotate.rotation || 0; cssp._overwriteProps.push("rotation"); } plugin._onInitTween(data.proxy, v, cssp._tween); return pt; }}); }; p._mod = function(lookup) { var op = this._overwriteProps, i = op.length, val; while (--i > -1) { val = lookup[op[i]]; if (val && typeof(val) === "function") { this._mod[op[i]] = val; } } }; p._kill = function(lookup) { var a = this._props, p, i; for (p in this._beziers) { if (p in lookup) { delete this._beziers[p]; delete this._func[p]; i = a.length; while (--i > -1) { if (a[i] === p) { a.splice(i, 1); } } } } a = this._autoRotate; if (a) { i = a.length; while (--i > -1) { if (lookup[a[i][2]]) { a.splice(i, 1); } } } return this._super._kill.call(this, lookup); }; }()); /* * ---------------------------------------------------------------- * CSSPlugin * ---------------------------------------------------------------- */ _gsScope._gsDefine("plugins.CSSPlugin", ["plugins.TweenPlugin","TweenLite"], function(TweenPlugin, TweenLite) { /** @constructor **/ var CSSPlugin = function() { TweenPlugin.call(this, "css"); this._overwriteProps.length = 0; this.setRatio = CSSPlugin.prototype.setRatio; //speed optimization (avoid prototype lookup on this "hot" method) }, _globals = _gsScope._gsDefine.globals, _hasPriority, //turns true whenever a CSSPropTween instance is created that has a priority other than 0. This helps us discern whether or not we should spend the time organizing the linked list or not after a CSSPlugin's _onInitTween() method is called. _suffixMap, //we set this in _onInitTween() each time as a way to have a persistent variable we can use in other methods like _parse() without having to pass it around as a parameter and we keep _parse() decoupled from a particular CSSPlugin instance _cs, //computed style (we store this in a shared variable to conserve memory and make minification tighter _overwriteProps, //alias to the currently instantiating CSSPlugin's _overwriteProps array. We use this closure in order to avoid having to pass a reference around from method to method and aid in minification. _specialProps = {}, p = CSSPlugin.prototype = new TweenPlugin("css"); p.constructor = CSSPlugin; CSSPlugin.version = "1.19.1"; CSSPlugin.API = 2; CSSPlugin.defaultTransformPerspective = 0; CSSPlugin.defaultSkewType = "compensated"; CSSPlugin.defaultSmoothOrigin = true; p = "px"; //we'll reuse the "p" variable to keep file size down CSSPlugin.suffixMap = {top:p, right:p, bottom:p, left:p, width:p, height:p, fontSize:p, padding:p, margin:p, perspective:p, lineHeight:""}; var _numExp = /(?:\-|\.|\b)(\d|\.|e\-)+/g, _relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g, _valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)" _NaNExp = /(?![+-]?\d*\.?\d+|[+-]|e[+-]\d+)[^0-9]/g, //also allows scientific notation and doesn't kill the leading -/+ in -= and += _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g, _opacityExp = /opacity *= *([^)]*)/i, _opacityValExp = /opacity:([^;]*)/i, _alphaFilterExp = /alpha\(opacity *=.+?\)/i, _rgbhslExp = /^(rgb|hsl)/, _capsExp = /([A-Z])/g, _camelExp = /-([a-z])/gi, _urlExp = /(^(?:url\(\"|url\())|(?:(\"\))$|\)$)/gi, //for pulling out urls from url(...) or url("...") strings (some browsers wrap urls in quotes, some don't when reporting things like backgroundImage) _camelFunc = function(s, g) { return g.toUpperCase(); }, _horizExp = /(?:Left|Right|Width)/i, _ieGetMatrixExp = /(M11|M12|M21|M22)=[\d\-\.e]+/gi, _ieSetMatrixExp = /progid\:DXImageTransform\.Microsoft\.Matrix\(.+?\)/i, _commasOutsideParenExp = /,(?=[^\)]*(?:\(|$))/gi, //finds any commas that are not within parenthesis _complexExp = /[\s,\(]/i, //for testing a string to find if it has a space, comma, or open parenthesis (clues that it's a complex value) _DEG2RAD = Math.PI / 180, _RAD2DEG = 180 / Math.PI, _forcePT = {}, _dummyElement = {style:{}}, _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, _createElement = function(type, ns) { return _doc.createElementNS ? _doc.createElementNS(ns || "http://www.w3.org/1999/xhtml", type) : _doc.createElement(type); }, _tempDiv = _createElement("div"), _tempImg = _createElement("img"), _internals = CSSPlugin._internals = {_specialProps:_specialProps}, //provides a hook to a few internal methods that we need to access from inside other plugins _agent = (_gsScope.navigator || {}).userAgent || "", _autoRound, _reqSafariFix, //we won't apply the Safari transform fix until we actually come across a tween that affects a transform property (to maintain best performance). _isSafari, _isFirefox, //Firefox has a bug that causes 3D transformed elements to randomly disappear unless a repaint is forced after each update on each element. _isSafariLT6, //Safari (and Android 4 which uses a flavor of Safari) has a bug that prevents changes to "top" and "left" properties from rendering properly if changed on the same frame as a transform UNLESS we set the element's WebkitBackfaceVisibility to hidden (weird, I know). Doing this for Android 3 and earlier seems to actually cause other problems, though (fun!) _ieVers, _supportsOpacity = (function() { //we set _isSafari, _ieVers, _isFirefox, and _supportsOpacity all in one function here to reduce file size slightly, especially in the minified version. var i = _agent.indexOf("Android"), a = _createElement("a"); _isSafari = (_agent.indexOf("Safari") !== -1 && _agent.indexOf("Chrome") === -1 && (i === -1 || parseFloat(_agent.substr(i+8, 2)) > 3)); _isSafariLT6 = (_isSafari && (parseFloat(_agent.substr(_agent.indexOf("Version/")+8, 2)) < 6)); _isFirefox = (_agent.indexOf("Firefox") !== -1); Iif ((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(_agent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(_agent)) { _ieVers = parseFloat( RegExp.$1 ); } Iif (!a) { return false; } a.style.cssText = "top:1px;opacity:.55;"; return /^0.55/.test(a.style.opacity); }()), _getIEOpacity = function(v) { return (_opacityExp.test( ((typeof(v) === "string") ? v : (v.currentStyle ? v.currentStyle.filter : v.style.filter) || "") ) ? ( parseFloat( RegExp.$1 ) / 100 ) : 1); }, _log = function(s) {//for logging messages, but in a way that won't throw errors in old versions of IE. if (_gsScope.console) { console.log(s); } }, _target, //when initting a CSSPlugin, we set this variable so that we can access it from within many other functions without having to pass it around as params _index, //when initting a CSSPlugin, we set this variable so that we can access it from within many other functions without having to pass it around as params _prefixCSS = "", //the non-camelCase vendor prefix like "-o-", "-moz-", "-ms-", or "-webkit-" _prefix = "", //camelCase vendor prefix like "O", "ms", "Webkit", or "Moz". // @private feed in a camelCase property name like "transform" and it will check to see if it is valid as-is or if it needs a vendor prefix. It returns the corrected camelCase property name (i.e. "WebkitTransform" or "MozTransform" or "transform" or null if no such property is found, like if the browser is IE8 or before, "transform" won't be found at all) _checkPropPrefix = function(p, e) { e = e || _tempDiv; var s = e.style, a, i; Iif (s[p] !== undefined) { return p; } p = p.charAt(0).toUpperCase() + p.substr(1); a = ["O","Moz","ms","Ms","Webkit"]; i = 5; while (--i > -1 && s[a[i]+p] === undefined) { } Iif (i >= 0) { _prefix = (i === 3) ? "ms" : a[i]; _prefixCSS = "-" + _prefix.toLowerCase() + "-"; return _prefix + p; } return null; }, _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : function() {}, /** * @private Returns the css style for a particular property of an element. For example, to get whatever the current "left" css value for an element with an ID of "myElement", you could do: * var currentLeft = CSSPlugin.getStyle( document.getElementById("myElement"), "left"); * * @param {!Object} t Target element whose style property you want to query * @param {!string} p Property name (like "left" or "top" or "marginTop", etc.) * @param {Object=} cs Computed style object. This just provides a way to speed processing if you're going to get several properties on the same element in quick succession - you can reuse the result of the getComputedStyle() call. * @param {boolean=} calc If true, the value will not be read directly from the element's "style" property (if it exists there), but instead the getComputedStyle() result will be used. This can be useful when you want to ensure that the browser itself is interpreting the value. * @param {string=} dflt Default value that should be returned in the place of null, "none", "auto" or "auto auto". * @return {?string} The current property value */ _getStyle = CSSPlugin.getStyle = function(t, p, cs, calc, dflt) { var rv; if (!_supportsOpacity) if (p === "opacity") { //several versions of IE don't use the standard "opacity" property - they use things like filter:alpha(opacity=50), so we parse that here. return _getIEOpacity(t); } if (!calc && t.style[p]) { rv = t.style[p]; } else if ((cs = cs || _getComputedStyle(t))) { rv = cs[p] || cs.getPropertyValue(p) || cs.getPropertyValue(p.replace(_capsExp, "-$1").toLowerCase()); } else if (t.currentStyle) { rv = t.currentStyle[p]; } return (dflt != null && (!rv || rv === "none" || rv === "auto" || rv === "auto auto")) ? dflt : rv; }, /** * @private Pass the target element, the property name, the numeric value, and the suffix (like "%", "em", "px", etc.) and it will spit back the equivalent pixel number. * @param {!Object} t Target element * @param {!string} p Property name (like "left", "top", "marginLeft", etc.) * @param {!number} v Value * @param {string=} sfx Suffix (like "px" or "%" or "em") * @param {boolean=} recurse If true, the call is a recursive one. In some browsers (like IE7/8), occasionally the value isn't accurately reported initially, but if we run the function again it will take effect. * @return {number} value in pixels */ _convertToPixels = _internals.convertToPixels = function(t, p, v, sfx, recurse) { if (sfx === "px" || !sfx) { return v; } if (sfx === "auto" || !v) { return 0; } var horiz = _horizExp.test(p), node = t, style = _tempDiv.style, neg = (v < 0), precise = (v === 1), pix, cache, time; if (neg) { v = -v; } if (precise) { v *= 100; } if (sfx === "%" && p.indexOf("border") !== -1) { pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight); } else { style.cssText = "border:0 solid red;position:" + _getStyle(t, "position") + ";line-height:0;"; if (sfx === "%" || !node.appendChild || sfx.charAt(0) === "v" || sfx === "rem") { node = t.parentNode || _doc.body; cache = node._gsCache; time = TweenLite.ticker.frame; if (cache && horiz && cache.time === time) { //performance optimization: we record the width of elements along with the ticker frame so that we can quickly get it again on the same tick (seems relatively safe to assume it wouldn't change on the same tick) return cache.width * v / 100; } style[(horiz ? "width" : "height")] = v + sfx; } else { style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx; } node.appendChild(_tempDiv); pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]); node.removeChild(_tempDiv); if (horiz && sfx === "%" && CSSPlugin.cacheWidths !== false) { cache = node._gsCache = node._gsCache || {}; cache.time = time; cache.width = pix / v * 100; } if (pix === 0 && !recurse) { pix = _convertToPixels(t, p, v, sfx, true); } } if (precise) { pix /= 100; } return neg ? -pix : pix; }, _calculateOffset = _internals.calculateOffset = function(t, p, cs) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop if (_getStyle(t, "position", cs) !== "absolute") { return 0; } var dim = ((p === "left") ? "Left" : "Top"), v = _getStyle(t, "margin" + dim, cs); return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), v.replace(_suffixExp, "")) || 0); }, // @private returns at object containing ALL of the style properties in camelCase and their associated values. _getAllStyles = function(t, cs) { var s = {}, i, tr, p; if ((cs = cs || _getComputedStyle(t, null))) { if ((i = cs.length)) { while (--i > -1) { p = cs[i]; if (p.indexOf("-transform") === -1 || _transformPropCSS === p) { //Some webkit browsers duplicate transform values, one non-prefixed and one prefixed ("transform" and "WebkitTransform"), so we must weed out the extra one here. s[p.replace(_camelExp, _camelFunc)] = cs.getPropertyValue(p); } } } else { //some browsers behave differently - cs.length is always 0, so we must do a for...in loop. for (i in cs) { if (i.indexOf("Transform") === -1 || _transformProp === i) { //Some webkit browsers duplicate transform values, one non-prefixed and one prefixed ("transform" and "WebkitTransform"), so we must weed out the extra one here. s[i] = cs[i]; } } } } else if ((cs = t.currentStyle || t.style)) { for (i in cs) { if (typeof(i) === "string" && s[i] === undefined) { s[i.replace(_camelExp, _camelFunc)] = cs[i]; } } } if (!_supportsOpacity) { s.opacity = _getIEOpacity(t); } tr = _getTransform(t, cs, false); s.rotation = tr.rotation; s.skewX = tr.skewX; s.scaleX = tr.scaleX; s.scaleY = tr.scaleY; s.x = tr.x; s.y = tr.y; if (_supports3D) { s.z = tr.z; s.rotationX = tr.rotationX; s.rotationY = tr.rotationY; s.scaleZ = tr.scaleZ; } if (s.filters) { delete s.filters; } return s; }, // @private analyzes two style objects (as returned by _getAllStyles()) and only looks for differences between them that contain tweenable values (like a number or color). It returns an object with a "difs" property which refers to an object containing only those isolated properties and values for tweening, and a "firstMPT" property which refers to the first MiniPropTween instance in a linked list that recorded all the starting values of the different properties so that we can revert to them at the end or beginning of the tween - we don't want the cascading to get messed up. The forceLookup parameter is an optional generic object with properties that should be forced into the results - this is necessary for className tweens that are overwriting others because imagine a scenario where a rollover/rollout adds/removes a class and the user swipes the mouse over the target SUPER fast, thus nothing actually changed yet and the subsequent comparison of the properties would indicate they match (especially when px rounding is taken into consideration), thus no tweening is necessary even though it SHOULD tween and remove those properties after the tween (otherwise the inline styles will contaminate things). See the className SpecialProp code for details. _cssDif = function(t, s1, s2, vars, forceLookup) { var difs = {}, style = t.style, val, p, mpt; for (p in s2) { if (p !== "cssText") if (p !== "length") if (isNaN(p)) if (s1[p] !== (val = s2[p]) || (forceLookup && forceLookup[p])) if (p.indexOf("Origin") === -1) if (typeof(val) === "number" || typeof(val) === "string") { difs[p] = (val === "auto" && (p === "left" || p === "top")) ? _calculateOffset(t, p) : ((val === "" || val === "auto" || val === "none") && typeof(s1[p]) === "string" && s1[p].replace(_NaNExp, "") !== "") ? 0 : val; //if the ending value is defaulting ("" or "auto"), we check the starting value and if it can be parsed into a number (a string which could have a suffix too, like 700px), then we swap in 0 for "" or "auto" so that things actually tween. if (style[p] !== undefined) { //for className tweens, we must remember which properties already existed inline - the ones that didn't should be removed when the tween isn't in progress because they were only introduced to facilitate the transition between classes. mpt = new MiniPropTween(style, p, style[p], mpt); } } } if (vars) { for (p in vars) { //copy properties (except className) if (p !== "className") { difs[p] = vars[p]; } } } return {difs:difs, firstMPT:mpt}; }, _dimensions = {width:["Left","Right"], height:["Top","Bottom"]}, _margins = ["marginLeft","marginRight","marginTop","marginBottom"], /** * @private Gets the width or height of an element * @param {!Object} t Target element * @param {!string} p Property name ("width" or "height") * @param {Object=} cs Computed style object (if one exists). Just a speed optimization. * @return {number} Dimension (in pixels) */ _getDimension = function(t, p, cs) { if ((t.nodeName + "").toLowerCase() === "svg") { //Chrome no longer supports offsetWidth/offsetHeight on SVG elements. return (cs || _getComputedStyle(t))[p] || 0; } else if (t.getCTM && _isSVG(t)) { return t.getBBox()[p] || 0; } var v = parseFloat((p === "width") ? t.offsetWidth : t.offsetHeight), a = _dimensions[p], i = a.length; cs = cs || _getComputedStyle(t, null); while (--i > -1) { v -= parseFloat( _getStyle(t, "padding" + a[i], cs, true) ) || 0; v -= parseFloat( _getStyle(t, "border" + a[i] + "Width", cs, true) ) || 0; } return v; }, // @private Parses position-related complex strings like "top left" or "50px 10px" or "70% 20%", etc. which are used for things like transformOrigin or backgroundPosition. Optionally decorates a supplied object (recObj) with the following properties: "ox" (offsetX), "oy" (offsetY), "oxp" (if true, "ox" is a percentage not a pixel value), and "oxy" (if true, "oy" is a percentage not a pixel value) _parsePosition = function(v, recObj) { if (v === "contain" || v === "auto" || v === "auto auto") { //note: Firefox uses "auto auto" as default whereas Chrome uses "auto". return v + " "; } if (v == null || v === "") { v = "0 0"; } var a = v.split(" "), x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0], y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1], i; if (a.length > 3 && !recObj) { //multiple positions a = v.split(", ").join(",").split(","); v = []; for (i = 0; i < a.length; i++) { v.push(_parsePosition(a[i])); } return v.join(","); } if (y == null) { y = (x === "center") ? "50%" : "0"; } else if (y === "center") { y = "50%"; } if (x === "center" || (isNaN(parseFloat(x)) && (x + "").indexOf("=") === -1)) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative. x = "50%"; } v = x + " " + y + ((a.length > 2) ? " " + a[2] : ""); if (recObj) { recObj.oxp = (x.indexOf("%") !== -1); recObj.oyp = (y.indexOf("%") !== -1); recObj.oxr = (x.charAt(1) === "="); recObj.oyr = (y.charAt(1) === "="); recObj.ox = parseFloat(x.replace(_NaNExp, "")); recObj.oy = parseFloat(y.replace(_NaNExp, "")); recObj.v = v; } return recObj || v; }, /** * @private Takes an ending value (typically a string, but can be a number) and a starting value and returns the change between the two, looking for relative value indicators like += and -= and it also ignores suffixes (but make sure the ending value starts with a number or +=/-= and that the starting value is a NUMBER!) * @param {(number|string)} e End value which is typically a string, but could be a number * @param {(number|string)} b Beginning value which is typically a string but could be a number * @return {number} Amount of change between the beginning and ending values (relative values that have a "+=" or "-=" are recognized) */ _parseChange = function(e, b) { if (typeof(e) === "function") { e = e(_index, _target); } return (typeof(e) === "string" && e.charAt(1) === "=") ? parseInt(e.charAt(0) + "1", 10) * parseFloat(e.substr(2)) : (parseFloat(e) - parseFloat(b)) || 0; }, /** * @private Takes a value and a default number, checks if the value is relative, null, or numeric and spits back a normalized number accordingly. Primarily used in the _parseTransform() function. * @param {Object} v Value to be parsed * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter) * @return {number} Parsed value */ _parseVal = function(v, d) { if (typeof(v) === "function") { v = v(_index, _target); } return (v == null) ? d : (typeof(v) === "string" && v.charAt(1) === "=") ? parseInt(v.charAt(0) + "1", 10) * parseFloat(v.substr(2)) + d : parseFloat(v) || 0; }, /** * @private Translates strings like "40deg" or "40" or 40rad" or "+=40deg" or "270_short" or "-90_cw" or "+=45_ccw" to a numeric radian angle. Of course a starting/default value must be fed in too so that relative values can be calculated properly. * @param {Object} v Value to be parsed * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter) * @param {string=} p property name for directionalEnd (optional - only used when the parsed value is directional ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation). Property name would be "rotation", "rotationX", or "rotationY" * @param {Object=} directionalEnd An object that will store the raw end values for directional angles ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation. * @return {number} parsed angle in radians */ _parseAngle = function(v, d, p, directionalEnd) { var min = 0.000001, cap, split, dif, result, isRelative; if (typeof(v) === "function") { v = v(_index, _target); } if (v == null) { result = d; } else if (typeof(v) === "number") { result = v; } else { cap = 360; split = v.split("_"); isRelative = (v.charAt(1) === "="); dif = (isRelative ? parseInt(v.charAt(0) + "1", 10) * parseFloat(split[0].substr(2)) : parseFloat(split[0])) * ((v.indexOf("rad") === -1) ? 1 : _RAD2DEG) - (isRelative ? 0 : d); if (split.length) { if (directionalEnd) { directionalEnd[p] = d + dif; } if (v.indexOf("short") !== -1) { dif = dif % cap; if (dif !== dif % (cap / 2)) { dif = (dif < 0) ? dif + cap : dif - cap; } } if (v.indexOf("_cw") !== -1 && dif < 0) { dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } else if (v.indexOf("ccw") !== -1 && dif > 0) { dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } } result = d + dif; } if (result < min && result > -min) { result = 0; } return result; }, _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, _hue = function(h, m1, m2) { h = (h < 0) ? h + 1 : (h > 1) ? h - 1 : h; return ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : (h < 0.5) ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * 255) + 0.5) | 0; }, /** * @private Parses a color (like #9F0, #FF9900, rgb(255,51,153) or hsl(108, 50%, 10%)) into an array with 3 elements for red, green, and blue or if toHSL parameter is true, it will populate the array with hue, saturation, and lightness values. If a relative value is found in an hsl() or hsla() string, it will preserve those relative prefixes and all the values in the array will be strings instead of numbers (in all other cases it will be populated with numbers). * @param {(string|number)} v The value the should be parsed which could be a string like #9F0 or rgb(255,102,51) or rgba(255,0,0,0.5) or it could be a number like 0xFF00CC or even a named color like red, blue, purple, etc. * @param {(boolean)} toHSL If true, an hsl() or hsla() value will be returned instead of rgb() or rgba() * @return {Array.<number>} An array containing red, green, and blue (and optionally alpha) in that order, or if the toHSL parameter was true, the array will contain hue, saturation and lightness (and optionally alpha) in that order. Always numbers unless there's a relative prefix found in an hsl() or hsla() string and toHSL is true. */ _parseColor = CSSPlugin.parseColor = function(v, toHSL) { var a, r, g, b, h, s, l, max, min, d, wasHSL; if (!v) { a = _colorLookup.black; } else if (typeof(v) === "number") { a = [v >> 16, (v >> 8) & 255, v & 255]; } else { if (v.charAt(v.length - 1) === ",") { //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value. v = v.substr(0, v.length - 1); } if (_colorLookup[v]) { a = _colorLookup[v]; } else if (v.charAt(0) === "#") { if (v.length === 4) { //for shorthand like #9F0 r = v.charAt(1); g = v.charAt(2); b = v.charAt(3); v = "#" + r + r + g + g + b + b; } v = parseInt(v.substr(1), 16); a = [v >> 16, (v >> 8) & 255, v & 255]; } else if (v.substr(0, 3) === "hsl") { a = wasHSL = v.match(_numExp); if (!toHSL) { h = (Number(a[0]) % 360) / 360; s = Number(a[1]) / 100; l = Number(a[2]) / 100; g = (l <= 0.5) ? l * (s + 1) : l + s - l * s; r = l * 2 - g; if (a.length > 3) { a[3] = Number(v[3]); } a[0] = _hue(h + 1 / 3, r, g); a[1] = _hue(h, r, g); a[2] = _hue(h - 1 / 3, r, g); } else if (v.indexOf("=") !== -1) { //if relative values are found, just return the raw strings with the relative prefixes in place. return v.match(_relNumExp); } } else { a = v.match(_numExp) || _colorLookup.transparent; } a[0] = Number(a[0]); a[1] = Number(a[1]); a[2] = Number(a[2]); if (a.length > 3) { a[3] = Number(a[3]); } } if (toHSL && !wasHSL) { r = a[0] / 255; g = a[1] / 255; b = a[2] / 255; max = Math.max(r, g, b); min = Math.min(r, g, b); l = (max + min) / 2; if (max === min) { h = s = 0; } else { d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); h = (max === r) ? (g - b) / d + (g < b ? 6 : 0) : (max === g) ? (b - r) / d + 2 : (r - g) / d + 4; h *= 60; } a[0] = (h + 0.5) | 0; a[1] = (s * 100 + 0.5) | 0; a[2] = (l * 100 + 0.5) | 0; } return a; }, _formatColors = function(s, toHSL) { var colors = s.match(_colorExp) || [], charIndex = 0, parsed = colors.length ? "" : s, i, color, temp; for (i = 0; i < colors.length; i++) { color = colors[i]; temp = s.substr(charIndex, s.indexOf(color, charIndex)-charIndex); charIndex += temp.length + color.length; color = _parseColor(color, toHSL); if (color.length === 3) { color.push(1); } parsed += temp + (toHSL ? "hsla(" + color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : "rgba(" + color.join(",")) + ")"; } return parsed + s.substr(charIndex); }, _colorExp = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b"; //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc. for (p in _colorLookup) { _colorExp += "|" + p + "\\b"; } _colorExp = new RegExp(_colorExp+")", "gi"); CSSPlugin.colorStringFilter = function(a) { var combined = a[0] + a[1], toHSL; if (_colorExp.test(combined)) { toHSL = (combined.indexOf("hsl(") !== -1 || combined.indexOf("hsla(") !== -1); a[0] = _formatColors(a[0], toHSL); a[1] = _formatColors(a[1], toHSL); } _colorExp.lastIndex = 0; }; Iif (!TweenLite.defaultStringFilter) { TweenLite.defaultStringFilter = CSSPlugin.colorStringFilter; } /** * @private Returns a formatter function that handles taking a string (or number in some cases) and returning a consistently formatted one in terms of delimiters, quantity of values, etc. For example, we may get boxShadow values defined as "0px red" or "0px 0px 10px rgb(255,0,0)" or "0px 0px 20px 20px #F00" and we need to ensure that what we get back is described with 4 numbers and a color. This allows us to feed it into the _parseComplex() method and split the values up appropriately. The neat thing about this _getFormatter() function is that the dflt defines a pattern as well as a default, so for example, _getFormatter("0px 0px 0px 0px #777", true) not only sets the default as 0px for all distances and #777 for the color, but also sets the pattern such that 4 numbers and a color will always get returned. * @param {!string} dflt The default value and pattern to follow. So "0px 0px 0px 0px #777" will ensure that 4 numbers and a color will always get returned. * @param {boolean=} clr If true, the values should be searched for color-related data. For example, boxShadow values typically contain a color whereas borderRadius don't. * @param {boolean=} collapsible If true, the value is a top/left/right/bottom style one that acts like margin or padding, where if only one value is received, it's used for all 4; if 2 are received, the first is duplicated for 3rd (bottom) and the 2nd is duplicated for the 4th spot (left), etc. * @return {Function} formatter function */ var _getFormatter = function(dflt, clr, collapsible, multi) { if (dflt == null) { return function(v) {return v;}; } var dColor = clr ? (dflt.match(_colorExp) || [""])[0] : "", dVals = dflt.split(dColor).join("").match(_valuesExp) || [], pfx = dflt.substr(0, dflt.indexOf(dVals[0])), sfx = (dflt.charAt(dflt.length - 1) === ")") ? ")" : "", delim = (dflt.indexOf(" ") !== -1) ? " " : ",", numVals = dVals.length, dSfx = (numVals > 0) ? dVals[0].replace(_numExp, "") : "", formatter; Iif (!numVals) { return function(v) {return v;}; } if (clr) { formatter = function(v) { var color, vals, i, a; if (typeof(v) === "number") { v += dSfx; } else if (multi && _commasOutsideParenExp.test(v)) { a = v.replace(_commasOutsideParenExp, "|").split("|"); for (i = 0; i < a.length; i++) { a[i] = formatter(a[i]); } return a.join(","); } color = (v.match(_colorExp) || [dColor])[0]; vals = v.split(color).join("").match(_valuesExp) || []; i = vals.length; if (numVals > i--) { while (++i < numVals) { vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i]; } } return pfx + vals.join(delim) + delim + color + sfx + (v.indexOf("inset") !== -1 ? " inset" : ""); }; return formatter; } formatter = function(v) { var vals, a, i; if (typeof(v) === "number") { v += dSfx; } else if (multi && _commasOutsideParenExp.test(v)) { a = v.replace(_commasOutsideParenExp, "|").split("|"); for (i = 0; i < a.length; i++) { a[i] = formatter(a[i]); } return a.join(","); } vals = v.match(_valuesExp) || []; i = vals.length; if (numVals > i--) { while (++i < numVals) { vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i]; } } return pfx + vals.join(delim) + sfx; }; return formatter; }, /** * @private returns a formatter function that's used for edge-related values like marginTop, marginLeft, paddingBottom, paddingRight, etc. Just pass a comma-delimited list of property names related to the edges. * @param {!string} props a comma-delimited list of property names in order from top to left, like "marginTop,marginRight,marginBottom,marginLeft" * @return {Function} a formatter function */ _getEdgeParser = function(props) { props = props.split(","); return function(t, e, p, cssp, pt, plugin, vars) { var a = (e + "").split(" "), i; vars = {}; for (i = 0; i < 4; i++) { vars[props[i]] = a[i] = a[i] || a[(((i - 1) / 2) >> 0)]; } return cssp.parse(t, vars, pt, plugin); }; }, // @private used when other plugins must tween values first, like BezierPlugin or ThrowPropsPlugin, etc. That plugin's setRatio() gets called first so that the values are updated, and then we loop through the MiniPropTweens which handle copying the values into their appropriate slots so that they can then be applied correctly in the main CSSPlugin setRatio() method. Remember, we typically create a proxy object that has a bunch of uniquely-named properties that we feed to the sub-plugin and it does its magic normally, and then we must interpret those values and apply them to the css because often numbers must get combined/concatenated, suffixes added, etc. to work with css, like boxShadow could have 4 values plus a color. _setPluginRatio = _internals._setPluginRatio = function(v) { this.plugin.setRatio(v); var d = this.data, proxy = d.proxy, mpt = d.firstMPT, min = 0.000001, val, pt, i, str, p; while (mpt) { val = proxy[mpt.v]; if (mpt.r) { val = Math.round(val); } else if (val < min && val > -min) { val = 0; } mpt.t[mpt.p] = val; mpt = mpt._next; } if (d.autoRotate) { d.autoRotate.rotation = d.mod ? d.mod(proxy.rotation, this.t) : proxy.rotation; //special case for ModifyPlugin to hook into an auto-rotating bezier } //at the end, we must set the CSSPropTween's "e" (end) value dynamically here because that's what is used in the final setRatio() method. Same for "b" at the beginning. if (v === 1 || v === 0) { mpt = d.firstMPT; p = (v === 1) ? "e" : "b"; while (mpt) { pt = mpt.t; if (!pt.type) { pt[p] = pt.s + pt.xs0; } else if (pt.type === 1) { str = pt.xs0 + pt.s + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt[p] = str; } mpt = mpt._next; } } }, /** * @private @constructor Used by a few SpecialProps to hold important values for proxies. For example, _parseToProxy() creates a MiniPropTween instance for each property that must get tweened on the proxy, and we record the original property name as well as the unique one we create for the proxy, plus whether or not the value needs to be rounded plus the original value. * @param {!Object} t target object whose property we're tweening (often a CSSPropTween) * @param {!string} p property name * @param {(number|string|object)} v value * @param {MiniPropTween=} next next MiniPropTween in the linked list * @param {boolean=} r if true, the tweened value should be rounded to the nearest integer */ MiniPropTween = function(t, p, v, next, r) { this.t = t; this.p = p; this.v = v; this.r = r; if (next) { next._prev = this; this._next = next; } }, /** * @private Most other plugins (like BezierPlugin and ThrowPropsPlugin and others) can only tween numeric values, but CSSPlugin must accommodate special values that have a bunch of extra data (like a suffix or strings between numeric values, etc.). For example, boxShadow has values like "10px 10px 20px 30px rgb(255,0,0)" which would utterly confuse other plugins. This method allows us to split that data apart and grab only the numeric data and attach it to uniquely-named properties of a generic proxy object ({}) so that we can feed that to virtually any plugin to have the numbers tweened. However, we must also keep track of which properties from the proxy go with which CSSPropTween values and instances. So we create a linked list of MiniPropTweens. Each one records a target (the original CSSPropTween), property (like "s" or "xn1" or "xn2") that we're tweening and the unique property name that was used for the proxy (like "boxShadow_xn1" and "boxShadow_xn2") and whether or not they need to be rounded. That way, in the _setPluginRatio() method we can simply copy the values over from the proxy to the CSSPropTween instance(s). Then, when the main CSSPlugin setRatio() method runs and applies the CSSPropTween values accordingly, they're updated nicely. So the external plugin tweens the numbers, _setPluginRatio() copies them over, and setRatio() acts normally, applying css-specific values to the element. * This method returns an object that has the following properties: * - proxy: a generic object containing the starting values for all the properties that will be tweened by the external plugin. This is what we feed to the external _onInitTween() as the target * - end: a generic object containing the ending values for all the properties that will be tweened by the external plugin. This is what we feed to the external plugin's _onInitTween() as the destination values * - firstMPT: the first MiniPropTween in the linked list * - pt: the first CSSPropTween in the linked list that was created when parsing. If shallow is true, this linked list will NOT attach to the one passed into the _parseToProxy() as the "pt" (4th) parameter. * @param {!Object} t target object to be tweened * @param {!(Object|string)} vars the object containing the information about the tweening values (typically the end/destination values) that should be parsed * @param {!CSSPlugin} cssp The CSSPlugin instance * @param {CSSPropTween=} pt the next CSSPropTween in the linked list * @param {TweenPlugin=} plugin the external TweenPlugin instance that will be handling tweening the numeric values * @param {boolean=} shallow if true, the resulting linked list from the parse will NOT be attached to the CSSPropTween that was passed in as the "pt" (4th) parameter. * @return An object containing the following properties: proxy, end, firstMPT, and pt (see above for descriptions) */ _parseToProxy = _internals._parseToProxy = function(t, vars, cssp, pt, plugin, shallow) { var bpt = pt, start = {}, end = {}, transform = cssp._transform, oldForce = _forcePT, i, p, xp, mpt, firstPT; cssp._transform = null; _forcePT = vars; pt = firstPT = cssp.parse(t, vars, pt, plugin); _forcePT = oldForce; //break off from the linked list so the new ones are isolated. if (shallow) { cssp._transform = transform; if (bpt) { bpt._prev = null; if (bpt._prev) { bpt._prev._next = null; } } } while (pt && pt !== bpt) { if (pt.type <= 1) { p = pt.p; end[p] = pt.s + pt.c; start[p] = pt.s; if (!shallow) { mpt = new MiniPropTween(pt, "s", p, mpt, pt.r); pt.c = 0; } if (pt.type === 1) { i = pt.l; while (--i > 0) { xp = "xn" + i; p = pt.p + "_" + xp; end[p] = pt.data[xp]; start[p] = pt[xp]; if (!shallow) { mpt = new MiniPropTween(pt, xp, p, mpt, pt.rxp[xp]); } } } } pt = pt._next; } return {proxy:start, end:end, firstMPT:mpt, pt:firstPT}; }, /** * @constructor Each property that is tweened has at least one CSSPropTween associated with it. These instances store important information like the target, property, starting value, amount of change, etc. They can also optionally have a number of "extra" strings and numeric values named xs1, xn1, xs2, xn2, xs3, xn3, etc. where "s" indicates string and "n" indicates number. These can be pieced together in a complex-value tween (type:1) that has alternating types of data like a string, number, string, number, etc. For example, boxShadow could be "5px 5px 8px rgb(102, 102, 51)". In that value, there are 6 numbers that may need to tween and then pieced back together into a string again with spaces, suffixes, etc. xs0 is special in that it stores the suffix for standard (type:0) tweens, -OR- the first string (prefix) in a complex-value (type:1) CSSPropTween -OR- it can be the non-tweening value in a type:-1 CSSPropTween. We do this to conserve memory. * CSSPropTweens have the following optional properties as well (not defined through the constructor): * - l: Length in terms of the number of extra properties that the CSSPropTween has (default: 0). For example, for a boxShadow we may need to tween 5 numbers in which case l would be 5; Keep in mind that the start/end values for the first number that's tweened are always stored in the s and c properties to conserve memory. All additional values thereafter are stored in xn1, xn2, etc. * - xfirst: The first instance of any sub-CSSPropTweens that are tweening properties of this instance. For example, we may split up a boxShadow tween so that there's a main CSSPropTween of type:1 that has various xs* and xn* values associated with the h-shadow, v-shadow, blur, color, etc. Then we spawn a CSSPropTween for each of those that has a higher priority and runs BEFORE the main CSSPropTween so that the values are all set by the time it needs to re-assemble them. The xfirst gives us an easy way to identify the first one in that chain which typically ends at the main one (because they're all prepende to the linked list) * - plugin: The TweenPlugin instance that will handle the tweening of any complex values. For example, sometimes we don't want to use normal subtweens (like xfirst refers to) to tween the values - we might want ThrowPropsPlugin or BezierPlugin some other plugin to do the actual tweening, so we create a plugin instance and store a reference here. We need this reference so that if we get a request to round values or disable a tween, we can pass along that request. * - data: Arbitrary data that needs to be stored with the CSSPropTween. Typically if we're going to have a plugin handle the tweening of a complex-value tween, we create a generic object that stores the END values that we're tweening to and the CSSPropTween's xs1, xs2, etc. have the starting values. We store that object as data. That way, we can simply pass that object to the plugin and use the CSSPropTween as the target. * - setRatio: Only used for type:2 tweens that require custom functionality. In this case, we call the CSSPropTween's setRatio() method and pass the ratio each time the tween updates. This isn't quite as efficient as doing things directly in the CSSPlugin's setRatio() method, but it's very convenient and flexible. * @param {!Object} t Target object whose property will be tweened. Often a DOM element, but not always. It could be anything. * @param {string} p Property to tween (name). For example, to tween element.width, p would be "width". * @param {number} s Starting numeric value * @param {number} c Change in numeric value over the course of the entire tween. For example, if element.width starts at 5 and should end at 100, c would be 95. * @param {CSSPropTween=} next The next CSSPropTween in the linked list. If one is defined, we will define its _prev as the new instance, and the new instance's _next will be pointed at it. * @param {number=} type The type of CSSPropTween where -1 = a non-tweening value, 0 = a standard simple tween, 1 = a complex value (like one that has multiple numbers in a comma- or space-delimited string like border:"1px solid red"), and 2 = one that uses a custom setRatio function that does all of the work of applying the values on each update. * @param {string=} n Name of the property that should be used for overwriting purposes which is typically the same as p but not always. For example, we may need to create a subtween for the 2nd part of a "clip:rect(...)" tween in which case "p" might be xs1 but "n" is still "clip" * @param {boolean=} r If true, the value(s) should be rounded * @param {number=} pr Priority in the linked list order. Higher priority CSSPropTweens will be updated before lower priority ones. The default priority is 0. * @param {string=} b Beginning value. We store this to ensure that it is EXACTLY what it was when the tween began without any risk of interpretation issues. * @param {string=} e Ending value. We store this to ensure that it is EXACTLY what the user defined at the end of the tween without any risk of interpretation issues. */ CSSPropTween = _internals.CSSPropTween = function(t, p, s, c, next, type, n, r, pr, b, e) { this.t = t; //target this.p = p; //property this.s = s; //starting value this.c = c; //change value this.n = n || p; //name that this CSSPropTween should be associated to (usually the same as p, but not always - n is what overwriting looks at) if (!(t instanceof CSSPropTween)) { _overwriteProps.push(this.n); } this.r = r; //round (boolean) this.type = type || 0; //0 = normal tween, -1 = non-tweening (in which case xs0 will be applied to the target's property, like tp.t[tp.p] = tp.xs0), 1 = complex-value SpecialProp, 2 = custom setRatio() that does all the work if (pr) { this.pr = pr; _hasPriority = true; } this.b = (b === undefined) ? s : b; this.e = (e === undefined) ? s + c : e; if (next) { this._next = next; next._prev = this; } }, _addNonTweeningNumericPT = function(target, prop, start, end, next, overwriteProp) { //cleans up some code redundancies and helps minification. Just a fast way to add a NUMERIC non-tweening CSSPropTween var pt = new CSSPropTween(target, prop, start, end - start, next, -1, overwriteProp); pt.b = start; pt.e = pt.xs0 = end; return pt; }, /** * Takes a target, the beginning value and ending value (as strings) and parses them into a CSSPropTween (possibly with child CSSPropTweens) that accommodates multiple numbers, colors, comma-delimited values, etc. For example: * sp.parseComplex(element, "boxShadow", "5px 10px 20px rgb(255,102,51)", "0px 0px 0px red", true, "0px 0px 0px rgb(0,0,0,0)", pt); * It will walk through the beginning and ending values (which should be in the same format with the same number and type of values) and figure out which parts are numbers, what strings separate the numeric/tweenable values, and then create the CSSPropTweens accordingly. If a plugin is defined, no child CSSPropTweens will be created. Instead, the ending values will be stored in the "data" property of the returned CSSPropTween like: {s:-5, xn1:-10, xn2:-20, xn3:255, xn4:0, xn5:0} so that it can be fed to any other plugin and it'll be plain numeric tweens but the recomposition of the complex value will be handled inside CSSPlugin's setRatio(). * If a setRatio is defined, the type of the CSSPropTween will be set to 2 and recomposition of the values will be the responsibility of that method. * * @param {!Object} t Target whose property will be tweened * @param {!string} p Property that will be tweened (its name, like "left" or "backgroundColor" or "boxShadow") * @param {string} b Beginning value * @param {string} e Ending value * @param {boolean} clrs If true, the value could contain a color value like "rgb(255,0,0)" or "#F00" or "red". The default is false, so no colors will be recognized (a performance optimization) * @param {(string|number|Object)} dflt The default beginning value that should be used if no valid beginning value is defined or if the number of values inside the complex beginning and ending values don't match * @param {?CSSPropTween} pt CSSPropTween instance that is the current head of the linked list (we'll prepend to this). * @param {number=} pr Priority in the linked list order. Higher priority properties will be updated before lower priority ones. The default priority is 0. * @param {TweenPlugin=} plugin If a plugin should handle the tweening of extra properties, pass the plugin instance here. If one is defined, then NO subtweens will be created for any extra properties (the properties will be created - just not additional CSSPropTween instances to tween them) because the plugin is expected to do so. However, the end values WILL be populated in the "data" property, like {s:100, xn1:50, xn2:300} * @param {function(number)=} setRatio If values should be set in a custom function instead of being pieced together in a type:1 (complex-value) CSSPropTween, define that custom function here. * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parseComplex() call. */ _parseComplex = CSSPlugin.parseComplex = function(t, p, b, e, clrs, dflt, pt, pr, plugin, setRatio) { //DEBUG: _log("parseComplex: "+p+", b: "+b+", e: "+e); b = b || dflt || ""; if (typeof(e) === "function") { e = e(_index, _target); } pt = new CSSPropTween(t, p, 0, 0, pt, (setRatio ? 2 : 1), null, false, pr, b, e); e += ""; //ensures it's a string if (clrs && _colorExp.test(e + b)) { //if colors are found, normalize the formatting to rgba() or hsla(). e = [b, e]; CSSPlugin.colorStringFilter(e); b = e[0]; e = e[1]; } var ba = b.split(", ").join(",").split(" "), //beginning array ea = e.split(", ").join(",").split(" "), //ending array l = ba.length, autoRound = (_autoRound !== false), i, xi, ni, bv, ev, bnums, enums, bn, hasAlpha, temp, cv, str, useHSL; if (e.indexOf(",") !== -1 || b.indexOf(",") !== -1) { ba = ba.join(" ").replace(_commasOutsideParenExp, ", ").split(" "); ea = ea.join(" ").replace(_commasOutsideParenExp, ", ").split(" "); l = ba.length; } if (l !== ea.length) { //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")"); ba = (dflt || "").split(" "); l = ba.length; } pt.plugin = plugin; pt.setRatio = setRatio; _colorExp.lastIndex = 0; for (i = 0; i < l; i++) { bv = ba[i]; ev = ea[i]; bn = parseFloat(bv); //if the value begins with a number (most common). It's fine if it has a suffix like px if (bn || bn === 0) { pt.appendXtra("", bn, _parseChange(ev, bn), ev.replace(_relNumExp, ""), (autoRound && ev.indexOf("px") !== -1), true); //if the value is a color } else if (clrs && _colorExp.test(bv)) { str = ev.indexOf(")") + 1; str = ")" + (str ? ev.substr(str) : ""); //if there's a comma or ) at the end, retain it. useHSL = (ev.indexOf("hsl") !== -1 && _supportsOpacity); bv = _parseColor(bv, useHSL); ev = _parseColor(ev, useHSL); hasAlpha = (bv.length + ev.length > 6); if (hasAlpha && !_supportsOpacity && ev[3] === 0) { //older versions of IE don't support rgba(), so if the destination alpha is 0, just use "transparent" for the end color pt["xs" + pt.l] += pt.l ? " transparent" : "transparent"; pt.e = pt.e.split(ea[i]).join("transparent"); } else { if (!_supportsOpacity) { //old versions of IE don't support rgba(). hasAlpha = false; } if (useHSL) { pt.appendXtra((hasAlpha ? "hsla(" : "hsl("), bv[0], _parseChange(ev[0], bv[0]), ",", false, true) .appendXtra("", bv[1], _parseChange(ev[1], bv[1]), "%,", false) .appendXtra("", bv[2], _parseChange(ev[2], bv[2]), (hasAlpha ? "%," : "%" + str), false); } else { pt.appendXtra((hasAlpha ? "rgba(" : "rgb("), bv[0], ev[0] - bv[0], ",", true, true) .appendXtra("", bv[1], ev[1] - bv[1], ",", true) .appendXtra("", bv[2], ev[2] - bv[2], (hasAlpha ? "," : str), true); } if (hasAlpha) { bv = (bv.length < 4) ? 1 : bv[3]; pt.appendXtra("", bv, ((ev.length < 4) ? 1 : ev[3]) - bv, str, false); } } _colorExp.lastIndex = 0; //otherwise the test() on the RegExp could move the lastIndex and taint future results. } else { bnums = bv.match(_numExp); //gets each group of numbers in the beginning value string and drops them into an array //if no number is found, treat it as a non-tweening value and just append the string to the current xs. if (!bnums) { pt["xs" + pt.l] += (pt.l || pt["xs" + pt.l]) ? " " + ev : ev; //loop through all the numbers that are found and construct the extra values on the pt. } else { enums = ev.match(_relNumExp); //get each group of numbers in the end value string and drop them into an array. We allow relative values too, like +=50 or -=.5 if (!enums || enums.length !== bnums.length) { //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")"); return pt; } ni = 0; for (xi = 0; xi < bnums.length; xi++) { cv = bnums[xi]; temp = bv.indexOf(cv, ni); pt.appendXtra(bv.substr(ni, temp - ni), Number(cv), _parseChange(enums[xi], cv), "", (autoRound && bv.substr(temp + cv.length, 2) === "px"), (xi === 0)); ni = temp + cv.length; } pt["xs" + pt.l] += bv.substr(ni); } } } //if there are relative values ("+=" or "-=" prefix), we need to adjust the ending value to eliminate the prefixes and combine the values properly. if (e.indexOf("=") !== -1) if (pt.data) { str = pt.xs0 + pt.data.s; for (i = 1; i < pt.l; i++) { str += pt["xs" + i] + pt.data["xn" + i]; } pt.e = str + pt["xs" + i]; } if (!pt.l) { pt.type = -1; pt.xs0 = pt.e; } return pt.xfirst || pt; }, i = 9; p = CSSPropTween.prototype; p.l = p.pr = 0; //length (number of extra properties like xn1, xn2, xn3, etc. while (--i > 0) { p["xn" + i] = 0; p["xs" + i] = ""; } p.xs0 = ""; p._next = p._prev = p.xfirst = p.data = p.plugin = p.setRatio = p.rxp = null; /** * Appends and extra tweening value to a CSSPropTween and automatically manages any prefix and suffix strings. The first extra value is stored in the s and c of the main CSSPropTween instance, but thereafter any extras are stored in the xn1, xn2, xn3, etc. The prefixes and suffixes are stored in the xs0, xs1, xs2, etc. properties. For example, if I walk through a clip value like "rect(10px, 5px, 0px, 20px)", the values would be stored like this: * xs0:"rect(", s:10, xs1:"px, ", xn1:5, xs2:"px, ", xn2:0, xs3:"px, ", xn3:20, xn4:"px)" * And they'd all get joined together when the CSSPlugin renders (in the setRatio() method). * @param {string=} pfx Prefix (if any) * @param {!number} s Starting value * @param {!number} c Change in numeric value over the course of the entire tween. For example, if the start is 5 and the end is 100, the change would be 95. * @param {string=} sfx Suffix (if any) * @param {boolean=} r Round (if true). * @param {boolean=} pad If true, this extra value should be separated by the previous one by a space. If there is no previous extra and pad is true, it will automatically drop the space. * @return {CSSPropTween} returns itself so that multiple methods can be chained together. */ p.appendXtra = function(pfx, s, c, sfx, r, pad) { var pt = this, l = pt.l; pt["xs" + l] += (pad && (l || pt["xs" + l])) ? " " + pfx : pfx || ""; if (!c) if (l !== 0 && !pt.plugin) { //typically we'll combine non-changing values right into the xs to optimize performance, but we don't combine them when there's a plugin that will be tweening the values because it may depend on the values being split apart, like for a bezier, if a value doesn't change between the first and second iteration but then it does on the 3rd, we'll run into trouble because there's no xn slot for that value! pt["xs" + l] += s + (sfx || ""); return pt; } pt.l++; pt.type = pt.setRatio ? 2 : 1; pt["xs" + pt.l] = sfx || ""; if (l > 0) { pt.data["xn" + l] = s + c; pt.rxp["xn" + l] = r; //round extra property (we need to tap into this in the _parseToProxy() method) pt["xn" + l] = s; if (!pt.plugin) { pt.xfirst = new CSSPropTween(pt, "xn" + l, s, c, pt.xfirst || pt, 0, pt.n, r, pt.pr); pt.xfirst.xs0 = 0; //just to ensure that the property stays numeric which helps modern browsers speed up processing. Remember, in the setRatio() method, we do pt.t[pt.p] = val + pt.xs0 so if pt.xs0 is "" (the default), it'll cast the end value as a string. When a property is a number sometimes and a string sometimes, it prevents the compiler from locking in the data type, slowing things down slightly. } return pt; } pt.data = {s:s + c}; pt.rxp = {}; pt.s = s; pt.c = c; pt.r = r; return pt; }; /** * @constructor A SpecialProp is basically a css property that needs to be treated in a non-standard way, like if it may contain a complex value like boxShadow:"5px 10px 15px rgb(255, 102, 51)" or if it is associated with another plugin like ThrowPropsPlugin or BezierPlugin. Every SpecialProp is associated with a particular property name like "boxShadow" or "throwProps" or "bezier" and it will intercept those values in the vars object that's passed to the CSSPlugin and handle them accordingly. * @param {!string} p Property name (like "boxShadow" or "throwProps") * @param {Object=} options An object containing any of the following configuration options: * - defaultValue: the default value * - parser: A function that should be called when the associated property name is found in the vars. This function should return a CSSPropTween instance and it should ensure that it is properly inserted into the linked list. It will receive 4 paramters: 1) The target, 2) The value defined in the vars, 3) The CSSPlugin instance (whose _firstPT should be used for the linked list), and 4) A computed style object if one was calculated (this is a speed optimization that allows retrieval of starting values quicker) * - formatter: a function that formats any value received for this special property (for example, boxShadow could take "5px 5px red" and format it to "5px 5px 0px 0px red" so that both the beginning and ending values have a common order and quantity of values.) * - prefix: if true, we'll determine whether or not this property requires a vendor prefix (like Webkit or Moz or ms or O) * - color: set this to true if the value for this SpecialProp may contain color-related values like rgb(), rgba(), etc. * - priority: priority in the linked list order. Higher priority SpecialProps will be updated before lower priority ones. The default priority is 0. * - multi: if true, the formatter should accommodate a comma-delimited list of values, like boxShadow could have multiple boxShadows listed out. * - collapsible: if true, the formatter should treat the value like it's a top/right/bottom/left value that could be collapsed, like "5px" would apply to all, "5px, 10px" would use 5px for top/bottom and 10px for right/left, etc. * - keyword: a special keyword that can [optionally] be found inside the value (like "inset" for boxShadow). This allows us to validate beginning/ending values to make sure they match (if the keyword is found in one, it'll be added to the other for consistency by default). */ var SpecialProp = function(p, options) { options = options || {}; this.p = options.prefix ? _checkPropPrefix(p) || p : p; _specialProps[p] = _specialProps[this.p] = this; this.format = options.formatter || _getFormatter(options.defaultValue, options.color, options.collapsible, options.multi); if (options.parser) { this.parse = options.parser; } this.clrs = options.color; this.multi = options.multi; this.keyword = options.keyword; this.dflt = options.defaultValue; this.pr = options.priority || 0; }, //shortcut for creating a new SpecialProp that can accept multiple properties as a comma-delimited list (helps minification). dflt can be an array for multiple values (we don't do a comma-delimited list because the default value may contain commas, like rect(0px,0px,0px,0px)). We attach this method to the SpecialProp class/object instead of using a private _createSpecialProp() method so that we can tap into it externally if necessary, like from another plugin. _registerComplexSpecialProp = _internals._registerComplexSpecialProp = function(p, options, defaults) { Iif (typeof(options) !== "object") { options = {parser:defaults}; //to make backwards compatible with older versions of BezierPlugin and ThrowPropsPlugin } var a = p.split(","), d = options.defaultValue, i, temp; defaults = defaults || [d]; for (i = 0; i < a.length; i++) { options.prefix = (i === 0 && options.prefix); options.defaultValue = defaults[i] || d; temp = new SpecialProp(a[i], options); } }, //creates a placeholder special prop for a plugin so that the property gets caught the first time a tween of it is attempted, and at that time it makes the plugin register itself, thus taking over for all future tweens of that property. This allows us to not mandate that things load in a particular order and it also allows us to log() an error that informs the user when they attempt to tween an external plugin-related property without loading its .js file. _registerPluginProp = _internals._registerPluginProp = function(p) { Eif (!_specialProps[p]) { var pluginName = p.charAt(0).toUpperCase() + p.substr(1) + "Plugin"; _registerComplexSpecialProp(p, {parser:function(t, e, p, cssp, pt, plugin, vars) { var pluginClass = _globals.com.greensock.plugins[pluginName]; if (!pluginClass) { _log("Error: " + pluginName + " js file not loaded."); return pt; } pluginClass._cssRegister(); return _specialProps[p].parse(t, e, p, cssp, pt, plugin, vars); }}); } }; p = SpecialProp.prototype; /** * Alias for _parseComplex() that automatically plugs in certain values for this SpecialProp, like its property name, whether or not colors should be sensed, the default value, and priority. It also looks for any keyword that the SpecialProp defines (like "inset" for boxShadow) and ensures that the beginning and ending values have the same number of values for SpecialProps where multi is true (like boxShadow and textShadow can have a comma-delimited list) * @param {!Object} t target element * @param {(string|number|object)} b beginning value * @param {(string|number|object)} e ending (destination) value * @param {CSSPropTween=} pt next CSSPropTween in the linked list * @param {TweenPlugin=} plugin If another plugin will be tweening the complex value, that TweenPlugin instance goes here. * @param {function=} setRatio If a custom setRatio() method should be used to handle this complex value, that goes here. * @return {CSSPropTween=} First CSSPropTween in the linked list */ p.parseComplex = function(t, b, e, pt, plugin, setRatio) { var kwd = this.keyword, i, ba, ea, l, bi, ei; //if this SpecialProp's value can contain a comma-delimited list of values (like boxShadow or textShadow), we must parse them in a special way, and look for a keyword (like "inset" for boxShadow) and ensure that the beginning and ending BOTH have it if the end defines it as such. We also must ensure that there are an equal number of values specified (we can't tween 1 boxShadow to 3 for example) if (this.multi) if (_commasOutsideParenExp.test(e) || _commasOutsideParenExp.test(b)) { ba = b.replace(_commasOutsideParenExp, "|").split("|"); ea = e.replace(_commasOutsideParenExp, "|").split("|"); } else if (kwd) { ba = [b]; ea = [e]; } if (ea) { l = (ea.length > ba.length) ? ea.length : ba.length; for (i = 0; i < l; i++) { b = ba[i] = ba[i] || this.dflt; e = ea[i] = ea[i] || this.dflt; if (kwd) { bi = b.indexOf(kwd); ei = e.indexOf(kwd); if (bi !== ei) { if (ei === -1) { //if the keyword isn't in the end value, remove it from the beginning one. ba[i] = ba[i].split(kwd).join(""); } else if (bi === -1) { //if the keyword isn't in the beginning, add it. ba[i] += " " + kwd; } } } } b = ba.join(", "); e = ea.join(", "); } return _parseComplex(t, this.p, b, e, this.clrs, this.dflt, pt, this.pr, plugin, setRatio); }; /** * Accepts a target and end value and spits back a CSSPropTween that has been inserted into the CSSPlugin's linked list and conforms with all the conventions we use internally, like type:-1, 0, 1, or 2, setting up any extra property tweens, priority, etc. For example, if we have a boxShadow SpecialProp and call: * this._firstPT = sp.parse(element, "5px 10px 20px rgb(2550,102,51)", "boxShadow", this); * It should figure out the starting value of the element's boxShadow, compare it to the provided end value and create all the necessary CSSPropTweens of the appropriate types to tween the boxShadow. The CSSPropTween that gets spit back should already be inserted into the linked list (the 4th parameter is the current head, so prepend to that). * @param {!Object} t Target object whose property is being tweened * @param {Object} e End value as provided in the vars object (typically a string, but not always - like a throwProps would be an object). * @param {!string} p Property name * @param {!CSSPlugin} cssp The CSSPlugin instance that should be associated with this tween. * @param {?CSSPropTween} pt The CSSPropTween that is the current head of the linked list (we'll prepend to it) * @param {TweenPlugin=} plugin If a plugin will be used to tween the parsed value, this is the plugin instance. * @param {Object=} vars Original vars object that contains the data for parsing. * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parse() call. */ p.parse = function(t, e, p, cssp, pt, plugin, vars) { return this.parseComplex(t.style, this.format(_getStyle(t, this.p, _cs, false, this.dflt)), this.format(e), pt, plugin); }; /** * Registers a special property that should be intercepted from any "css" objects defined in tweens. This allows you to handle them however you want without CSSPlugin doing it for you. The 2nd parameter should be a function that accepts 3 parameters: * 1) Target object whose property should be tweened (typically a DOM element) * 2) The end/destination value (could be a string, number, object, or whatever you want) * 3) The tween instance (you probably don't need to worry about this, but it can be useful for looking up information like the duration) * * Then, your function should return a function which will be called each time the tween gets rendered, passing a numeric "ratio" parameter to your function that indicates the change factor (usually between 0 and 1). For example: * * CSSPlugin.registerSpecialProp("myCustomProp", function(target, value, tween) { * var start = target.style.width; * return function(ratio) { * target.style.width = (start + value * ratio) + "px"; * console.log("set width to " + target.style.width); * } * }, 0); * * Then, when I do this tween, it will trigger my special property: * * TweenLite.to(element, 1, {css:{myCustomProp:100}}); * * In the example, of course, we're just changing the width, but you can do anything you want. * * @param {!string} name Property name (or comma-delimited list of property names) that should be intercepted and handled by your function. For example, if I define "myCustomProp", then it would handle that portion of the following tween: TweenLite.to(element, 1, {css:{myCustomProp:100}}) * @param {!function(Object, Object, Object, string):function(number)} onInitTween The function that will be called when a tween of this special property is performed. The function will receive 4 parameters: 1) Target object that should be tweened, 2) Value that was passed to the tween, 3) The tween instance itself (rarely used), and 4) The property name that's being tweened. Your function should return a function that should be called on every update of the tween. That function will receive a single parameter that is a "change factor" value (typically between 0 and 1) indicating the amount of change as a ratio. You can use this to determine how to set the values appropriately in your function. * @param {number=} priority Priority that helps the engine determine the order in which to set the properties (default: 0). Higher priority properties will be updated before lower priority ones. */ CSSPlugin.registerSpecialProp = function(name, onInitTween, priority) { _registerComplexSpecialProp(name, {parser:function(t, e, p, cssp, pt, plugin, vars) { var rv = new CSSPropTween(t, p, 0, 0, pt, 2, p, false, priority); rv.plugin = plugin; rv.setRatio = onInitTween(t, e, cssp._tween, p); return rv; }, priority:priority}); }; //transform-related methods and properties CSSPlugin.useSVGTransformAttr = true; //Safari and Firefox both have some rendering bugs when applying CSS transforms to SVG elements, so default to using the "transform" attribute instead (users can override this). var _transformProps = ("scaleX,scaleY,scaleZ,x,y,z,skewX,skewY,rotation,rotationX,rotationY,perspective,xPercent,yPercent").split(","), _transformProp = _checkPropPrefix("transform"), //the Javascript (camelCase) transform property, like msTransform, WebkitTransform, MozTransform, or OTransform. _transformPropCSS = _prefixCSS + "transform", _transformOriginProp = _checkPropPrefix("transformOrigin"), _supports3D = (_checkPropPrefix("perspective") !== null), Transform = _internals.Transform = function() { this.perspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0; this.force3D = (CSSPlugin.defaultForce3D === false || !_supports3D) ? false : CSSPlugin.defaultForce3D || "auto"; }, _SVGElement = _gsScope.SVGElement, _useSVGTransformAttr, //Some browsers (like Firefox and IE) don't honor transform-origin properly in SVG elements, so we need to manually adjust the matrix accordingly. We feature detect here rather than always doing the conversion for certain browsers because they may fix the problem at some point in the future. _createSVG = function(type, container, attributes) { var element = _doc.createElementNS("http://www.w3.org/2000/svg", type), reg = /([a-z])([A-Z])/g, p; for (p in attributes) { element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]); } container.appendChild(element); return element; }, _docElement = _doc.documentElement || {}, _forceSVGTransformAttr = (function() { //IE and Android stock don't support CSS transforms on SVG elements, so we must write them to the "transform" attribute. We populate this variable in the _parseTransform() method, and only if/when we come across an SVG element var force = _ieVers || (/Android/i.test(_agent) && !_gsScope.chrome), svg, rect, width; Iif (_doc.createElementNS && !force) { //IE8 and earlier doesn't support SVG anyway svg = _createSVG("svg", _docElement); rect = _createSVG("rect", svg, {width:100, height:50, x:100}); width = rect.getBoundingClientRect().width; rect.style[_transformOriginProp] = "50% 50%"; rect.style[_transformProp] = "scaleX(0.5)"; force = (width === rect.getBoundingClientRect().width && !(_isFirefox && _supports3D)); //note: Firefox fails the test even though it does support CSS transforms in 3D. Since we can't push 3D stuff into the transform attribute, we force Firefox to pass the test here (as long as it does truly support 3D). _docElement.removeChild(svg); } return force; })(), _parseSVGOrigin = function(e, local, decoratee, absolute, smoothOrigin, skipRecord) { var tm = e._gsTransform, m = _getMatrix(e, true), v, x, y, xOrigin, yOrigin, a, b, c, d, tx, ty, determinant, xOriginOld, yOriginOld; if (tm) { xOriginOld = tm.xOrigin; //record the original values before we alter them. yOriginOld = tm.yOrigin; } if (!absolute || (v = absolute.split(" ")).length < 2) { b = e.getBBox(); if (b.x === 0 && b.y === 0 && b.width + b.height === 0) { //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case. b = {x: parseFloat(e.hasAttribute("x") ? e.getAttribute("x") : e.hasAttribute("cx") ? e.getAttribute("cx") : 0) || 0, y: parseFloat(e.hasAttribute("y") ? e.getAttribute("y") : e.hasAttribute("cy") ? e.getAttribute("cy") : 0) || 0, width:0, height:0}; } local = _parsePosition(local).split(" "); v = [(local[0].indexOf("%") !== -1 ? parseFloat(local[0]) / 100 * b.width : parseFloat(local[0])) + b.x, (local[1].indexOf("%") !== -1 ? parseFloat(local[1]) / 100 * b.height : parseFloat(local[1])) + b.y]; } decoratee.xOrigin = xOrigin = parseFloat(v[0]); decoratee.yOrigin = yOrigin = parseFloat(v[1]); if (absolute && m !== _identity2DMatrix) { //if svgOrigin is being set, we must invert the matrix and determine where the absolute point is, factoring in the current transforms. Otherwise, the svgOrigin would be based on the element's non-transformed position on the canvas. a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; determinant = (a * d - b * c); if (determinant) { //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero. x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + ((c * ty - d * tx) / determinant); y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - ((a * ty - b * tx) / determinant); xOrigin = decoratee.xOrigin = v[0] = x; yOrigin = decoratee.yOrigin = v[1] = y; } } if (tm) { //avoid jump when transformOrigin is changed - adjust the x/y values accordingly if (skipRecord) { decoratee.xOffset = tm.xOffset; decoratee.yOffset = tm.yOffset; tm = decoratee; } if (smoothOrigin || (smoothOrigin !== false && CSSPlugin.defaultSmoothOrigin !== false)) { x = xOrigin - xOriginOld; y = yOrigin - yOriginOld; //originally, we simply adjusted the x and y values, but that would cause problems if, for example, you created a rotational tween part-way through an x/y tween. Managing the offset in a separate variable gives us ultimate flexibility. //tm.x -= x - (x * m[0] + y * m[2]); //tm.y -= y - (x * m[1] + y * m[3]); tm.xOffset += (x * m[0] + y * m[2]) - x; tm.yOffset += (x * m[1] + y * m[3]) - y; } else { tm.xOffset = tm.yOffset = 0; } } if (!skipRecord) { e.setAttribute("data-svg-origin", v.join(" ")); } }, _getBBoxHack = function(swapIfPossible) { //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a <defs> element and/or <mask>. We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it). var svg = _createElement("svg", this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"), oldParent = this.parentNode, oldSibling = this.nextSibling, oldCSS = this.style.cssText, bbox; _docElement.appendChild(svg); svg.appendChild(this); this.style.display = "block"; if (swapIfPossible) { try { bbox = this.getBBox(); this._originalGetBBox = this.getBBox; this.getBBox = _getBBoxHack; } catch (e) { } } else if (this._originalGetBBox) { bbox = this._originalGetBBox(); } if (oldSibling) { oldParent.insertBefore(this, oldSibling); } else { oldParent.appendChild(this); } _docElement.removeChild(svg); this.style.cssText = oldCSS; return bbox; }, _getBBox = function(e) { try { return e.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a <symbol> or <defs>). https://bugzilla.mozilla.org/show_bug.cgi?id=612118 } catch (error) { return _getBBoxHack.call(e, true); } }, _isSVG = function(e) { //reports if the element is an SVG on which getBBox() actually works return !!(_SVGElement && e.getCTM && _getBBox(e) && (!e.parentNode || e.ownerSVGElement)); }, _identity2DMatrix = [1,0,0,1,0,0], _getMatrix = function(e, force2D) { var tm = e._gsTransform || new Transform(), rnd = 100000, style = e.style, isDefault, s, m, n, dec, none; if (_transformProp) { s = _getStyle(e, _transformPropCSS, null, true); } else if (e.currentStyle) { //for older versions of IE, we need to interpret the filter portion that is in the format: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand') Notice that we need to swap b and c compared to a normal matrix. s = e.currentStyle.filter.match(_ieGetMatrixExp); s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : ""; } isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)"); if (isDefault && _transformProp && ((none = (_getComputedStyle(e).display === "none")) || !e.parentNode)) { if (none) { //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". n = style.display; style.display = "block"; } if (!e.parentNode) { dec = 1; //flag _docElement.appendChild(e); } s = _getStyle(e, _transformPropCSS, null, true); isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)"); if (n) { style.display = n; } else if (none) { _removeProp(style, "display"); } if (dec) { _docElement.removeChild(e); } } if (tm.svg || (e.getCTM && _isSVG(e))) { if (isDefault && (style[_transformProp] + "").indexOf("matrix") !== -1) { //some browsers (like Chrome 40) don't correctly report transforms that are applied inline on an SVG element (they don't get included in the computed style), so we double-check here and accept matrix values s = style[_transformProp]; isDefault = 0; } m = e.getAttribute("transform"); if (isDefault && m) { if (m.indexOf("matrix") !== -1) { //just in case there's a "transform" value specified as an attribute instead of CSS style. Accept either a matrix() or simple translate() value though. s = m; isDefault = 0; } else if (m.indexOf("translate") !== -1) { s = "matrix(1,0,0,1," + m.match(/(?:\-|\b)[\d\-\.e]+\b/gi).join(",") + ")"; isDefault = 0; } } } if (isDefault) { return _identity2DMatrix; } //split the matrix values out into an array (m for matrix) m = (s || "").match(_numExp) || []; i = m.length; while (--i > -1) { n = Number(m[i]); m[i] = (dec = n - (n |= 0)) ? ((dec * rnd + (dec < 0 ? -0.5 : 0.5)) | 0) / rnd + n : n; //convert strings to Numbers and round to 5 decimal places to avoid issues with tiny numbers. Roughly 20x faster than Number.toFixed(). We also must make sure to round before dividing so that values like 0.9999999999 become 1 to avoid glitches in browser rendering and interpretation of flipped/rotated 3D matrices. And don't just multiply the number by rnd, floor it, and then divide by rnd because the bitwise operations max out at a 32-bit signed integer, thus it could get clipped at a relatively low value (like 22,000.00000 for example). } return (force2D && m.length > 6) ? [m[0], m[1], m[4], m[5], m[12], m[13]] : m; }, /** * Parses the transform values for an element, returning an object with x, y, z, scaleX, scaleY, scaleZ, rotation, rotationX, rotationY, skewX, and skewY properties. Note: by default (for performance reasons), all skewing is combined into skewX and rotation but skewY still has a place in the transform object so that we can record how much of the skew is attributed to skewX vs skewY. Remember, a skewY of 10 looks the same as a rotation of 10 and skewX of -10. * @param {!Object} t target element * @param {Object=} cs computed style object (optional) * @param {boolean=} rec if true, the transform values will be recorded to the target element's _gsTransform object, like target._gsTransform = {x:0, y:0, z:0, scaleX:1...} * @param {boolean=} parse if true, we'll ignore any _gsTransform values that already exist on the element, and force a reparsing of the css (calculated style) * @return {object} object containing all of the transform properties/values like {x:0, y:0, z:0, scaleX:1...} */ _getTransform = _internals.getTransform = function(t, cs, rec, parse) { if (t._gsTransform && rec && !parse) { return t._gsTransform; //if the element already has a _gsTransform, use that. Note: some browsers don't accurately return the calculated style for the transform (particularly for SVG), so it's almost always safest to just use the values we've already applied rather than re-parsing things. } var tm = rec ? t._gsTransform || new Transform() : new Transform(), invX = (tm.scaleX < 0), //in order to interpret things properly, we need to know if the user applied a negative scaleX previously so that we can adjust the rotation and skewX accordingly. Otherwise, if we always interpret a flipped matrix as affecting scaleY and the user only wants to tween the scaleX on multiple sequential tweens, it would keep the negative scaleY without that being the user's intent. min = 0.00002, rnd = 100000, zOrigin = _supports3D ? parseFloat(_getStyle(t, _transformOriginProp, cs, false, "0 0 0").split(" ")[2]) || tm.zOrigin || 0 : 0, defaultTransformPerspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0, m, i, scaleX, scaleY, rotation, skewX; tm.svg = !!(t.getCTM && _isSVG(t)); if (tm.svg) { _parseSVGOrigin(t, _getStyle(t, _transformOriginProp, cs, false, "50% 50%") + "", tm, t.getAttribute("data-svg-origin")); _useSVGTransformAttr = CSSPlugin.useSVGTransformAttr || _forceSVGTransformAttr; } m = _getMatrix(t); if (m !== _identity2DMatrix) { if (m.length === 16) { //we'll only look at these position-related 6 variables first because if x/y/z all match, it's relatively safe to assume we don't need to re-parse everything which risks losing important rotational information (like rotationX:180 plus rotationY:180 would look the same as rotation:180 - there's no way to know for sure which direction was taken based solely on the matrix3d() values) var a11 = m[0], a21 = m[1], a31 = m[2], a41 = m[3], a12 = m[4], a22 = m[5], a32 = m[6], a42 = m[7], a13 = m[8], a23 = m[9], a33 = m[10], a14 = m[12], a24 = m[13], a34 = m[14], a43 = m[11], angle = Math.atan2(a32, a33), t1, t2, t3, t4, cos, sin; //we manually compensate for non-zero z component of transformOrigin to work around bugs in Safari if (tm.zOrigin) { a34 = -tm.zOrigin; a14 = a13*a34-m[12]; a24 = a23*a34-m[13]; a34 = a33*a34+tm.zOrigin-m[14]; } tm.rotationX = angle * _RAD2DEG; //rotationX if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); t1 = a12*cos+a13*sin; t2 = a22*cos+a23*sin; t3 = a32*cos+a33*sin; a13 = a12*-sin+a13*cos; a23 = a22*-sin+a23*cos; a33 = a32*-sin+a33*cos; a43 = a42*-sin+a43*cos; a12 = t1; a22 = t2; a32 = t3; } //rotationY angle = Math.atan2(-a31, a33); tm.rotationY = angle * _RAD2DEG; if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); t1 = a11*cos-a13*sin; t2 = a21*cos-a23*sin; t3 = a31*cos-a33*sin; a23 = a21*sin+a23*cos; a33 = a31*sin+a33*cos; a43 = a41*sin+a43*cos; a11 = t1; a21 = t2; a31 = t3; } //rotationZ angle = Math.atan2(a21, a11); tm.rotation = angle * _RAD2DEG; if (angle) { cos = Math.cos(-angle); sin = Math.sin(-angle); a11 = a11*cos+a12*sin; t2 = a21*cos+a22*sin; a22 = a21*-sin+a22*cos; a32 = a31*-sin+a32*cos; a21 = t2; } if (tm.rotationX && Math.abs(tm.rotationX) + Math.abs(tm.rotation) > 359.9) { //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here. tm.rotationX = tm.rotation = 0; tm.rotationY = 180 - tm.rotationY; } tm.scaleX = ((Math.sqrt(a11 * a11 + a21 * a21) * rnd + 0.5) | 0) / rnd; tm.scaleY = ((Math.sqrt(a22 * a22 + a23 * a23) * rnd + 0.5) | 0) / rnd; tm.scaleZ = ((Math.sqrt(a32 * a32 + a33 * a33) * rnd + 0.5) | 0) / rnd; if (tm.rotationX || tm.rotationY) { tm.skewX = 0; } else { tm.skewX = (a12 || a22) ? Math.atan2(a12, a22) * _RAD2DEG + tm.rotation : tm.skewX || 0; if (Math.abs(tm.skewX) > 90 && Math.abs(tm.skewX) < 270) { if (invX) { tm.scaleX *= -1; tm.skewX += (tm.rotation <= 0) ? 180 : -180; tm.rotation += (tm.rotation <= 0) ? 180 : -180; } else { tm.scaleY *= -1; tm.skewX += (tm.skewX <= 0) ? 180 : -180; } } } tm.perspective = a43 ? 1 / ((a43 < 0) ? -a43 : a43) : 0; tm.x = a14; tm.y = a24; tm.z = a34; if (tm.svg) { tm.x -= tm.xOrigin - (tm.xOrigin * a11 - tm.yOrigin * a12); tm.y -= tm.yOrigin - (tm.yOrigin * a21 - tm.xOrigin * a22); } } else if ((!_supports3D || parse || !m.length || tm.x !== m[4] || tm.y !== m[5] || (!tm.rotationX && !tm.rotationY))) { //sometimes a 6-element matrix is returned even when we performed 3D transforms, like if rotationX and rotationY are 180. In cases like this, we still need to honor the 3D transforms. If we just rely on the 2D info, it could affect how the data is interpreted, like scaleY might get set to -1 or rotation could get offset by 180 degrees. For example, do a TweenLite.to(element, 1, {css:{rotationX:180, rotationY:180}}) and then later, TweenLite.to(element, 1, {css:{rotationX:0}}) and without this conditional logic in place, it'd jump to a state of being unrotated when the 2nd tween starts. Then again, we need to honor the fact that the user COULD alter the transforms outside of CSSPlugin, like by manually applying new css, so we try to sense that by looking at x and y because if those changed, we know the changes were made outside CSSPlugin and we force a reinterpretation of the matrix values. Also, in Webkit browsers, if the element's "display" is "none", its calculated style value will always return empty, so if we've already recorded the values in the _gsTransform object, we'll just rely on those. var k = (m.length >= 6), a = k ? m[0] : 1, b = m[1] || 0, c = m[2] || 0, d = k ? m[3] : 1; tm.x = m[4] || 0; tm.y = m[5] || 0; scaleX = Math.sqrt(a * a + b * b); scaleY = Math.sqrt(d * d + c * c); rotation = (a || b) ? Math.atan2(b, a) * _RAD2DEG : tm.rotation || 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist). skewX = (c || d) ? Math.atan2(c, d) * _RAD2DEG + rotation : tm.skewX || 0; if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) { if (invX) { scaleX *= -1; skewX += (rotation <= 0) ? 180 : -180; rotation += (rotation <= 0) ? 180 : -180; } else { scaleY *= -1; skewX += (skewX <= 0) ? 180 : -180; } } tm.scaleX = scaleX; tm.scaleY = scaleY; tm.rotation = rotation; tm.skewX = skewX; if (_supports3D) { tm.rotationX = tm.rotationY = tm.z = 0; tm.perspective = defaultTransformPerspective; tm.scaleZ = 1; } if (tm.svg) { tm.x -= tm.xOrigin - (tm.xOrigin * a + tm.yOrigin * c); tm.y -= tm.yOrigin - (tm.xOrigin * b + tm.yOrigin * d); } } tm.zOrigin = zOrigin; //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 0 in these cases. The conditional logic here is faster than calling Math.abs(). Also, browsers tend to render a SLIGHTLY rotated object in a fuzzy way, so we need to snap to exactly 0 when appropriate. for (i in tm) { if (tm[i] < min) if (tm[i] > -min) { tm[i] = 0; } } } //DEBUG: _log("parsed rotation of " + t.getAttribute("id")+": "+(tm.rotationX)+", "+(tm.rotationY)+", "+(tm.rotation)+", scale: "+tm.scaleX+", "+tm.scaleY+", "+tm.scaleZ+", position: "+tm.x+", "+tm.y+", "+tm.z+", perspective: "+tm.perspective+ ", origin: "+ tm.xOrigin+ ","+ tm.yOrigin); if (rec) { t._gsTransform = tm; //record to the object's _gsTransform which we use so that tweens can control individual properties independently (we need all the properties to accurately recompose the matrix in the setRatio() method) if (tm.svg) { //if we're supposed to apply transforms to the SVG element's "transform" attribute, make sure there aren't any CSS transforms applied or they'll override the attribute ones. Also clear the transform attribute if we're using CSS, just to be clean. if (_useSVGTransformAttr && t.style[_transformProp]) { TweenLite.delayedCall(0.001, function(){ //if we apply this right away (before anything has rendered), we risk there being no transforms for a brief moment and it also interferes with adjusting the transformOrigin in a tween with immediateRender:true (it'd try reading the matrix and it wouldn't have the appropriate data in place because we just removed it). _removeProp(t.style, _transformProp); }); } else if (!_useSVGTransformAttr && t.getAttribute("transform")) { TweenLite.delayedCall(0.001, function(){ t.removeAttribute("transform"); }); } } } return tm; }, //for setting 2D transforms in IE6, IE7, and IE8 (must use a "filter" to emulate the behavior of modern day browser transforms) _setIETransformRatio = function(v) { var t = this.data, //refers to the element's _gsTransform object ang = -t.rotation * _DEG2RAD, skew = ang + t.skewX * _DEG2RAD, rnd = 100000, a = ((Math.cos(ang) * t.scaleX * rnd) | 0) / rnd, b = ((Math.sin(ang) * t.scaleX * rnd) | 0) / rnd, c = ((Math.sin(skew) * -t.scaleY * rnd) | 0) / rnd, d = ((Math.cos(skew) * t.scaleY * rnd) | 0) / rnd, style = this.t.style, cs = this.t.currentStyle, filters, val; if (!cs) { return; } val = b; //just for swapping the variables an inverting them (reused "val" to avoid creating another variable in memory). IE's filter matrix uses a non-standard matrix configuration (angle goes the opposite way, and b and c are reversed and inverted) b = -c; c = -val; filters = cs.filter; style.filter = ""; //remove filters so that we can accurately measure offsetWidth/offsetHeight var w = this.t.offsetWidth, h = this.t.offsetHeight, clip = (cs.position !== "absolute"), m = "progid:DXImageTransform.Microsoft.Matrix(M11=" + a + ", M12=" + b + ", M21=" + c + ", M22=" + d, ox = t.x + (w * t.xPercent / 100), oy = t.y + (h * t.yPercent / 100), dx, dy; //if transformOrigin is being used, adjust the offset x and y if (t.ox != null) { dx = ((t.oxp) ? w * t.ox * 0.01 : t.ox) - w / 2; dy = ((t.oyp) ? h * t.oy * 0.01 : t.oy) - h / 2; ox += dx - (dx * a + dy * b); oy += dy - (dx * c + dy * d); } if (!clip) { m += ", sizingMethod='auto expand')"; } else { dx = (w / 2); dy = (h / 2); //translate to ensure that transformations occur around the correct origin (default is center). m += ", Dx=" + (dx - (dx * a + dy * b) + ox) + ", Dy=" + (dy - (dx * c + dy * d) + oy) + ")"; } if (filters.indexOf("DXImageTransform.Microsoft.Matrix(") !== -1) { style.filter = filters.replace(_ieSetMatrixExp, m); } else { style.filter = m + " " + filters; //we must always put the transform/matrix FIRST (before alpha(opacity=xx)) to avoid an IE bug that slices part of the object when rotation is applied with alpha. } //at the end or beginning of the tween, if the matrix is normal (1, 0, 0, 1) and opacity is 100 (or doesn't exist), remove the filter to improve browser performance. if (v === 0 || v === 1) if (a === 1) if (b === 0) if (c === 0) if (d === 1) if (!clip || m.indexOf("Dx=0, Dy=0") !== -1) if (!_opacityExp.test(filters) || parseFloat(RegExp.$1) === 100) if (filters.indexOf("gradient(" && filters.indexOf("Alpha")) === -1) { style.removeAttribute("filter"); } //we must set the margins AFTER applying the filter in order to avoid some bugs in IE8 that could (in rare scenarios) cause them to be ignored intermittently (vibration). if (!clip) { var mult = (_ieVers < 8) ? 1 : -1, //in Internet Explorer 7 and before, the box model is broken, causing the browser to treat the width/height of the actual rotated filtered image as the width/height of the box itself, but Microsoft corrected that in IE8. We must use a negative offset in IE8 on the right/bottom marg, prop, dif; dx = t.ieOffsetX || 0; dy = t.ieOffsetY || 0; t.ieOffsetX = Math.round((w - ((a < 0 ? -a : a) * w + (b < 0 ? -b : b) * h)) / 2 + ox); t.ieOffsetY = Math.round((h - ((d < 0 ? -d : d) * h + (c < 0 ? -c : c) * w)) / 2 + oy); for (i = 0; i < 4; i++) { prop = _margins[i]; marg = cs[prop]; //we need to get the current margin in case it is being tweened separately (we want to respect that tween's changes) val = (marg.indexOf("px") !== -1) ? parseFloat(marg) : _convertToPixels(this.t, prop, parseFloat(marg), marg.replace(_suffixExp, "")) || 0; if (val !== t[prop]) { dif = (i < 2) ? -t.ieOffsetX : -t.ieOffsetY; //if another tween is controlling a margin, we cannot only apply the difference in the ieOffsets, so we essentially zero-out the dx and dy here in that case. We record the margin(s) later so that we can keep comparing them, making this code very flexible. } else { dif = (i < 2) ? dx - t.ieOffsetX : dy - t.ieOffsetY; } style[prop] = (t[prop] = Math.round( val - dif * ((i === 0 || i === 2) ? 1 : mult) )) + "px"; } } }, /* translates a super small decimal to a string WITHOUT scientific notation _safeDecimal = function(n) { var s = (n < 0 ? -n : n) + "", a = s.split("e-"); return (n < 0 ? "-0." : "0.") + new Array(parseInt(a[1], 10) || 0).join("0") + a[0].split(".").join(""); }, */ _setTransformRatio = _internals.set3DTransformRatio = _internals.setTransformRatio = function(v) { var t = this.data, //refers to the element's _gsTransform object style = this.t.style, angle = t.rotation, rotationX = t.rotationX, rotationY = t.rotationY, sx = t.scaleX, sy = t.scaleY, sz = t.scaleZ, x = t.x, y = t.y, z = t.z, isSVG = t.svg, perspective = t.perspective, force3D = t.force3D, skewY = t.skewY, skewX = t.skewX, t1, a11, a12, a13, a21, a22, a23, a31, a32, a33, a41, a42, a43, zOrigin, min, cos, sin, t2, transform, comma, zero, skew, rnd; if (skewY) { //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees. skewX += skewY; angle += skewY; } //check to see if we should render as 2D (and SVGs must use 2D when _useSVGTransformAttr is true) if (((((v === 1 || v === 0) && force3D === "auto" && (this.tween._totalTime === this.tween._totalDuration || !this.tween._totalTime)) || !force3D) && !z && !perspective && !rotationY && !rotationX && sz === 1) || (_useSVGTransformAttr && isSVG) || !_supports3D) { //on the final render (which could be 0 for a from tween), if there are no 3D aspects, render in 2D to free up memory and improve performance especially on mobile devices. Check the tween's totalTime/totalDuration too in order to make sure it doesn't happen between repeats if it's a repeating tween. //2D if (angle || skewX || isSVG) { angle *= _DEG2RAD; skew = skewX * _DEG2RAD; rnd = 100000; a11 = Math.cos(angle) * sx; a21 = Math.sin(angle) * sx; a12 = Math.sin(angle - skew) * -sy; a22 = Math.cos(angle - skew) * sy; if (skew && t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does t1 = Math.tan(skew - skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a12 *= t1; a22 *= t1; if (skewY) { t1 = Math.tan(skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a11 *= t1; a21 *= t1; } } if (isSVG) { x += t.xOrigin - (t.xOrigin * a11 + t.yOrigin * a12) + t.xOffset; y += t.yOrigin - (t.xOrigin * a21 + t.yOrigin * a22) + t.yOffset; if (_useSVGTransformAttr && (t.xPercent || t.yPercent)) { //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the matrix to simulate it. min = this.t.getBBox(); x += t.xPercent * 0.01 * min.width; y += t.yPercent * 0.01 * min.height; } min = 0.000001; if (x < min) if (x > -min) { x = 0; } if (y < min) if (y > -min) { y = 0; } } transform = (((a11 * rnd) | 0) / rnd) + "," + (((a21 * rnd) | 0) / rnd) + "," + (((a12 * rnd) | 0) / rnd) + "," + (((a22 * rnd) | 0) / rnd) + "," + x + "," + y + ")"; if (isSVG && _useSVGTransformAttr) { this.t.setAttribute("transform", "matrix(" + transform); } else { //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 5 decimal places. style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix(" : "matrix(") + transform; } } else { style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix(" : "matrix(") + sx + ",0,0," + sy + "," + x + "," + y + ")"; } return; } if (_isFirefox) { //Firefox has a bug (at least in v25) that causes it to render the transparent part of 32-bit PNG images as black when displayed inside an iframe and the 3D scale is very small and doesn't change sufficiently enough between renders (like if you use a Power4.easeInOut to scale from 0 to 1 where the beginning values only change a tiny amount to begin the tween before accelerating). In this case, we force the scale to be 0.00002 instead which is visually the same but works around the Firefox issue. min = 0.0001; if (sx < min && sx > -min) { sx = sz = 0.00002; } if (sy < min && sy > -min) { sy = sz = 0.00002; } if (perspective && !t.z && !t.rotationX && !t.rotationY) { //Firefox has a bug that causes elements to have an odd super-thin, broken/dotted black border on elements that have a perspective set but aren't utilizing 3D space (no rotationX, rotationY, or z). perspective = 0; } } if (angle || skewX) { angle *= _DEG2RAD; cos = a11 = Math.cos(angle); sin = a21 = Math.sin(angle); if (skewX) { angle -= skewX * _DEG2RAD; cos = Math.cos(angle); sin = Math.sin(angle); if (t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does t1 = Math.tan((skewX - skewY) * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); cos *= t1; sin *= t1; if (t.skewY) { t1 = Math.tan(skewY * _DEG2RAD); t1 = Math.sqrt(1 + t1 * t1); a11 *= t1; a21 *= t1; } } } a12 = -sin; a22 = cos; } else if (!rotationY && !rotationX && sz === 1 && !perspective && !isSVG) { //if we're only translating and/or 2D scaling, this is faster... style[_transformProp] = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) translate3d(" : "translate3d(") + x + "px," + y + "px," + z +"px)" + ((sx !== 1 || sy !== 1) ? " scale(" + sx + "," + sy + ")" : ""); return; } else { a11 = a22 = 1; a12 = a21 = 0; } // KEY INDEX AFFECTS // a11 0 rotation, rotationY, scaleX // a21 1 rotation, rotationY, scaleX // a31 2 rotationY, scaleX // a41 3 rotationY, scaleX // a12 4 rotation, skewX, rotationX, scaleY // a22 5 rotation, skewX, rotationX, scaleY // a32 6 rotationX, scaleY // a42 7 rotationX, scaleY // a13 8 rotationY, rotationX, scaleZ // a23 9 rotationY, rotationX, scaleZ // a33 10 rotationY, rotationX, scaleZ // a43 11 rotationY, rotationX, perspective, scaleZ // a14 12 x, zOrigin, svgOrigin // a24 13 y, zOrigin, svgOrigin // a34 14 z, zOrigin // a44 15 // rotation: Math.atan2(a21, a11) // rotationY: Math.atan2(a13, a33) (or Math.atan2(a13, a11)) // rotationX: Math.atan2(a32, a33) a33 = 1; a13 = a23 = a31 = a32 = a41 = a42 = 0; a43 = (perspective) ? -1 / perspective : 0; zOrigin = t.zOrigin; min = 0.000001; //threshold below which browsers use scientific notation which won't work. comma = ","; zero = "0"; angle = rotationY * _DEG2RAD; if (angle) { cos = Math.cos(angle); sin = Math.sin(angle); a31 = -sin; a41 = a43*-sin; a13 = a11*sin; a23 = a21*sin; a33 = cos; a43 *= cos; a11 *= cos; a21 *= cos; } angle = rotationX * _DEG2RAD; if (angle) { cos = Math.cos(angle); sin = Math.sin(angle); t1 = a12*cos+a13*sin; t2 = a22*cos+a23*sin; a32 = a33*sin; a42 = a43*sin; a13 = a12*-sin+a13*cos; a23 = a22*-sin+a23*cos; a33 = a33*cos; a43 = a43*cos; a12 = t1; a22 = t2; } if (sz !== 1) { a13*=sz; a23*=sz; a33*=sz; a43*=sz; } if (sy !== 1) { a12*=sy; a22*=sy; a32*=sy; a42*=sy; } if (sx !== 1) { a11*=sx; a21*=sx; a31*=sx; a41*=sx; } if (zOrigin || isSVG) { if (zOrigin) { x += a13*-zOrigin; y += a23*-zOrigin; z += a33*-zOrigin+zOrigin; } if (isSVG) { //due to bugs in some browsers, we need to manage the transform-origin of SVG manually x += t.xOrigin - (t.xOrigin * a11 + t.yOrigin * a12) + t.xOffset; y += t.yOrigin - (t.xOrigin * a21 + t.yOrigin * a22) + t.yOffset; } if (x < min && x > -min) { x = zero; } if (y < min && y > -min) { y = zero; } if (z < min && z > -min) { z = 0; //don't use string because we calculate perspective later and need the number. } } //optimized way of concatenating all the values into a string. If we do it all in one shot, it's slower because of the way browsers have to create temp strings and the way it affects memory. If we do it piece-by-piece with +=, it's a bit slower too. We found that doing it in these sized chunks works best overall: transform = ((t.xPercent || t.yPercent) ? "translate(" + t.xPercent + "%," + t.yPercent + "%) matrix3d(" : "matrix3d("); transform += ((a11 < min && a11 > -min) ? zero : a11) + comma + ((a21 < min && a21 > -min) ? zero : a21) + comma + ((a31 < min && a31 > -min) ? zero : a31); transform += comma + ((a41 < min && a41 > -min) ? zero : a41) + comma + ((a12 < min && a12 > -min) ? zero : a12) + comma + ((a22 < min && a22 > -min) ? zero : a22); if (rotationX || rotationY || sz !== 1) { //performance optimization (often there's no rotationX or rotationY, so we can skip these calculations) transform += comma + ((a32 < min && a32 > -min) ? zero : a32) + comma + ((a42 < min && a42 > -min) ? zero : a42) + comma + ((a13 < min && a13 > -min) ? zero : a13); transform += comma + ((a23 < min && a23 > -min) ? zero : a23) + comma + ((a33 < min && a33 > -min) ? zero : a33) + comma + ((a43 < min && a43 > -min) ? zero : a43) + comma; } else { transform += ",0,0,0,0,1,0,"; } transform += x + comma + y + comma + z + comma + (perspective ? (1 + (-z / perspective)) : 1) + ")"; style[_transformProp] = transform; }; p = Transform.prototype; p.x = p.y = p.z = p.skewX = p.skewY = p.rotation = p.rotationX = p.rotationY = p.zOrigin = p.xPercent = p.yPercent = p.xOffset = p.yOffset = 0; p.scaleX = p.scaleY = p.scaleZ = 1; _registerComplexSpecialProp("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,svgOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType,xPercent,yPercent,smoothOrigin", {parser:function(t, e, parsingProp, cssp, pt, plugin, vars) { if (cssp._lastParsedTransform === vars) { return pt; } //only need to parse the transform once, and only if the browser supports it. cssp._lastParsedTransform = vars; var scaleFunc = (vars.scale && typeof(vars.scale) === "function") ? vars.scale : 0, //if there's a function-based "scale" value, swap in the resulting numeric value temporarily. Otherwise, if it's called for both scaleX and scaleY independently, they may not match (like if the function uses Math.random()). swapFunc; if (typeof(vars[parsingProp]) === "function") { //whatever property triggers the initial parsing might be a function-based value in which case it already got called in parse(), thus we don't want to call it again in here. The most efficient way to avoid this is to temporarily swap the value directly into the vars object, and then after we do all our parsing in this function, we'll swap it back again. swapFunc = vars[parsingProp]; vars[parsingProp] = e; } if (scaleFunc) { vars.scale = scaleFunc(_index, t); } var originalGSTransform = t._gsTransform, style = t.style, min = 0.000001, i = _transformProps.length, v = vars, endRotations = {}, transformOriginString = "transformOrigin", m1 = _getTransform(t, _cs, true, v.parseTransform), orig = v.transform && ((typeof(v.transform) === "function") ? v.transform(_index, _target) : v.transform), m2, copy, has3D, hasChange, dr, x, y, matrix, p; cssp._transform = m1; if (orig && typeof(orig) === "string" && _transformProp) { //for values like transform:"rotate(60deg) scale(0.5, 0.8)" copy = _tempDiv.style; //don't use the original target because it might be SVG in which case some browsers don't report computed style correctly. copy[_transformProp] = orig; copy.display = "block"; //if display is "none", the browser often refuses to report the transform properties correctly. copy.position = "absolute"; _doc.body.appendChild(_tempDiv); m2 = _getTransform(_tempDiv, null, false); if (m1.svg) { //if it's an SVG element, x/y part of the matrix will be affected by whatever we use as the origin and the offsets, so compensate here... x = m1.xOrigin; y = m1.yOrigin; m2.x -= m1.xOffset; m2.y -= m1.yOffset; if (v.transformOrigin || v.svgOrigin) { //if this tween is altering the origin, we must factor that in here. The actual work of recording the transformOrigin values and setting up the PropTween is done later (still inside this function) so we cannot leave the changes intact here - we only want to update the x/y accordingly. orig = {}; _parseSVGOrigin(t, _parsePosition(v.transformOrigin), orig, v.svgOrigin, v.smoothOrigin, true); x = orig.xOrigin; y = orig.yOrigin; m2.x -= orig.xOffset - m1.xOffset; m2.y -= orig.yOffset - m1.yOffset; } if (x || y) { matrix = _getMatrix(_tempDiv, true); m2.x -= x - (x * matrix[0] + y * matrix[2]); m2.y -= y - (x * matrix[1] + y * matrix[3]); } } _doc.body.removeChild(_tempDiv); if (!m2.perspective) { m2.perspective = m1.perspective; //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case. } if (v.xPercent != null) { m2.xPercent = _parseVal(v.xPercent, m1.xPercent); } if (v.yPercent != null) { m2.yPercent = _parseVal(v.yPercent, m1.yPercent); } } else if (typeof(v) === "object") { //for values like scaleX, scaleY, rotation, x, y, skewX, and skewY or transform:{...} (object) m2 = {scaleX:_parseVal((v.scaleX != null) ? v.scaleX : v.scale, m1.scaleX), scaleY:_parseVal((v.scaleY != null) ? v.scaleY : v.scale, m1.scaleY), scaleZ:_parseVal(v.scaleZ, m1.scaleZ), x:_parseVal(v.x, m1.x), y:_parseVal(v.y, m1.y), z:_parseVal(v.z, m1.z), xPercent:_parseVal(v.xPercent, m1.xPercent), yPercent:_parseVal(v.yPercent, m1.yPercent), perspective:_parseVal(v.transformPerspective, m1.perspective)}; dr = v.directionalRotation; if (dr != null) { if (typeof(dr) === "object") { for (copy in dr) { v[copy] = dr[copy]; } } else { v.rotation = dr; } } if (typeof(v.x) === "string" && v.x.indexOf("%") !== -1) { m2.x = 0; m2.xPercent = _parseVal(v.x, m1.xPercent); } if (typeof(v.y) === "string" && v.y.indexOf("%") !== -1) { m2.y = 0; m2.yPercent = _parseVal(v.y, m1.yPercent); } m2.rotation = _parseAngle(("rotation" in v) ? v.rotation : ("shortRotation" in v) ? v.shortRotation + "_short" : ("rotationZ" in v) ? v.rotationZ : m1.rotation, m1.rotation, "rotation", endRotations); if (_supports3D) { m2.rotationX = _parseAngle(("rotationX" in v) ? v.rotationX : ("shortRotationX" in v) ? v.shortRotationX + "_short" : m1.rotationX || 0, m1.rotationX, "rotationX", endRotations); m2.rotationY = _parseAngle(("rotationY" in v) ? v.rotationY : ("shortRotationY" in v) ? v.shortRotationY + "_short" : m1.rotationY || 0, m1.rotationY, "rotationY", endRotations); } m2.skewX = _parseAngle(v.skewX, m1.skewX); m2.skewY = _parseAngle(v.skewY, m1.skewY); } if (_supports3D && v.force3D != null) { m1.force3D = v.force3D; hasChange = true; } m1.skewType = v.skewType || m1.skewType || CSSPlugin.defaultSkewType; has3D = (m1.force3D || m1.z || m1.rotationX || m1.rotationY || m2.z || m2.rotationX || m2.rotationY || m2.perspective); if (!has3D && v.scale != null) { m2.scaleZ = 1; //no need to tween scaleZ. } while (--i > -1) { p = _transformProps[i]; orig = m2[p] - m1[p]; if (orig > min || orig < -min || v[p] != null || _forcePT[p] != null) { hasChange = true; pt = new CSSPropTween(m1, p, m1[p], orig, pt); if (p in endRotations) { pt.e = endRotations[p]; //directional rotations typically have compensated values during the tween, but we need to make sure they end at exactly what the user requested } pt.xs0 = 0; //ensures the value stays numeric in setRatio() pt.plugin = plugin; cssp._overwriteProps.push(pt.n); } } orig = v.transformOrigin; if (m1.svg && (orig || v.svgOrigin)) { x = m1.xOffset; //when we change the origin, in order to prevent things from jumping we adjust the x/y so we must record those here so that we can create PropTweens for them and flip them at the same time as the origin y = m1.yOffset; _parseSVGOrigin(t, _parsePosition(orig), m2, v.svgOrigin, v.smoothOrigin); pt = _addNonTweeningNumericPT(m1, "xOrigin", (originalGSTransform ? m1 : m2).xOrigin, m2.xOrigin, pt, transformOriginString); //note: if there wasn't a transformOrigin defined yet, just start with the destination one; it's wasteful otherwise, and it causes problems with fromTo() tweens. For example, TweenLite.to("#wheel", 3, {rotation:180, transformOrigin:"50% 50%", delay:1}); TweenLite.fromTo("#wheel", 3, {scale:0.5, transformOrigin:"50% 50%"}, {scale:1, delay:2}); would cause a jump when the from values revert at the beginning of the 2nd tween. pt = _addNonTweeningNumericPT(m1, "yOrigin", (originalGSTransform ? m1 : m2).yOrigin, m2.yOrigin, pt, transformOriginString); if (x !== m1.xOffset || y !== m1.yOffset) { pt = _addNonTweeningNumericPT(m1, "xOffset", (originalGSTransform ? x : m1.xOffset), m1.xOffset, pt, transformOriginString); pt = _addNonTweeningNumericPT(m1, "yOffset", (originalGSTransform ? y : m1.yOffset), m1.yOffset, pt, transformOriginString); } orig = "0px 0px"; //certain browsers (like firefox) completely botch transform-origin, so we must remove it to prevent it from contaminating transforms. We manage it ourselves with xOrigin and yOrigin } if (orig || (_supports3D && has3D && m1.zOrigin)) { //if anything 3D is happening and there's a transformOrigin with a z component that's non-zero, we must ensure that the transformOrigin's z-component is set to 0 so that we can manually do those calculations to get around Safari bugs. Even if the user didn't specifically define a "transformOrigin" in this particular tween (maybe they did it via css directly). if (_transformProp) { hasChange = true; p = _transformOriginProp; orig = (orig || _getStyle(t, p, _cs, false, "50% 50%")) + ""; //cast as string to avoid errors pt = new CSSPropTween(style, p, 0, 0, pt, -1, transformOriginString); pt.b = style[p]; pt.plugin = plugin; if (_supports3D) { copy = m1.zOrigin; orig = orig.split(" "); m1.zOrigin = ((orig.length > 2 && !(copy !== 0 && orig[2] === "0px")) ? parseFloat(orig[2]) : copy) || 0; //Safari doesn't handle the z part of transformOrigin correctly, so we'll manually handle it in the _set3DTransformRatio() method. pt.xs0 = pt.e = orig[0] + " " + (orig[1] || "50%") + " 0px"; //we must define a z value of 0px specifically otherwise iOS 5 Safari will stick with the old one (if one was defined)! pt = new CSSPropTween(m1, "zOrigin", 0, 0, pt, -1, pt.n); //we must create a CSSPropTween for the _gsTransform.zOrigin so that it gets reset properly at the beginning if the tween runs backward (as opposed to just setting m1.zOrigin here) pt.b = copy; pt.xs0 = pt.e = m1.zOrigin; } else { pt.xs0 = pt.e = orig; } //for older versions of IE (6-8), we need to manually calculate things inside the setRatio() function. We record origin x and y (ox and oy) and whether or not the values are percentages (oxp and oyp). } else { _parsePosition(orig + "", m1); } } if (hasChange) { cssp._transformType = (!(m1.svg && _useSVGTransformAttr) && (has3D || this._transformType === 3)) ? 3 : 2; //quicker than calling cssp._enableTransforms(); } if (swapFunc) { vars[parsingProp] = swapFunc; } if (scaleFunc) { vars.scale = scaleFunc; } return pt; }, prefix:true}); _registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"}); _registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) { e = this.format(e); var props = ["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"], style = t.style, ea1, i, es2, bs2, bs, es, bn, en, w, h, esfx, bsfx, rel, hn, vn, em; w = parseFloat(t.offsetWidth); h = parseFloat(t.offsetHeight); ea1 = e.split(" "); for (i = 0; i < props.length; i++) { //if we're dealing with percentages, we must convert things separately for the horizontal and vertical axis! if (this.p.indexOf("border")) { //older browsers used a prefix props[i] = _checkPropPrefix(props[i]); } bs = bs2 = _getStyle(t, props[i], _cs, false, "0px"); if (bs.indexOf(" ") !== -1) { bs2 = bs.split(" "); bs = bs2[0]; bs2 = bs2[1]; } es = es2 = ea1[i]; bn = parseFloat(bs); bsfx = bs.substr((bn + "").length); rel = (es.charAt(1) === "="); if (rel) { en = parseInt(es.charAt(0)+"1", 10); es = es.substr(2); en *= parseFloat(es); esfx = es.substr((en + "").length - (en < 0 ? 1 : 0)) || ""; } else { en = parseFloat(es); esfx = es.substr((en + "").length); } if (esfx === "") { esfx = _suffixMap[p] || bsfx; } if (esfx !== bsfx) { hn = _convertToPixels(t, "borderLeft", bn, bsfx); //horizontal number (we use a bogus "borderLeft" property just because the _convertToPixels() method searches for the keywords "Left", "Right", "Top", and "Bottom" to determine of it's a horizontal or vertical property, and we need "border" in the name so that it knows it should measure relative to the element itself, not its parent. vn = _convertToPixels(t, "borderTop", bn, bsfx); //vertical number if (esfx === "%") { bs = (hn / w * 100) + "%"; bs2 = (vn / h * 100) + "%"; } else if (esfx === "em") { em = _convertToPixels(t, "borderLeft", 1, "em"); bs = (hn / em) + "em"; bs2 = (vn / em) + "em"; } else { bs = hn + "px"; bs2 = vn + "px"; } if (rel) { es = (parseFloat(bs) + en) + esfx; es2 = (parseFloat(bs2) + en) + esfx; } } pt = _parseComplex(style, props[i], bs + " " + bs2, es + " " + es2, false, "0px", pt); } return pt; }, prefix:true, formatter:_getFormatter("0px 0px 0px 0px", false, true)}); _registerComplexSpecialProp("borderBottomLeftRadius,borderBottomRightRadius,borderTopLeftRadius,borderTopRightRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) { return _parseComplex(t.style, p, this.format(_getStyle(t, p, _cs, false, "0px 0px")), this.format(e), false, "0px", pt); }, prefix:true, formatter:_getFormatter("0px 0px", false, true)}); _registerComplexSpecialProp("backgroundPosition", {defaultValue:"0 0", parser:function(t, e, p, cssp, pt, plugin) { var bp = "background-position", cs = (_cs || _getComputedStyle(t, null)), bs = this.format( ((cs) ? _ieVers ? cs.getPropertyValue(bp + "-x") + " " + cs.getPropertyValue(bp + "-y") : cs.getPropertyValue(bp) : t.currentStyle.backgroundPositionX + " " + t.currentStyle.backgroundPositionY) || "0 0"), //Internet Explorer doesn't report background-position correctly - we must query background-position-x and background-position-y and combine them (even in IE10). Before IE9, we must do the same with the currentStyle object and use camelCase es = this.format(e), ba, ea, i, pct, overlap, src; if ((bs.indexOf("%") !== -1) !== (es.indexOf("%") !== -1) && es.split(",").length < 2) { src = _getStyle(t, "backgroundImage").replace(_urlExp, ""); if (src && src !== "none") { ba = bs.split(" "); ea = es.split(" "); _tempImg.setAttribute("src", src); //set the temp IMG's src to the background-image so that we can measure its width/height i = 2; while (--i > -1) { bs = ba[i]; pct = (bs.indexOf("%") !== -1); if (pct !== (ea[i].indexOf("%") !== -1)) { overlap = (i === 0) ? t.offsetWidth - _tempImg.width : t.offsetHeight - _tempImg.height; ba[i] = pct ? (parseFloat(bs) / 100 * overlap) + "px" : (parseFloat(bs) / overlap * 100) + "%"; } } bs = ba.join(" "); } } return this.parseComplex(t.style, bs, es, pt, plugin); }, formatter:_parsePosition}); _registerComplexSpecialProp("backgroundSize", {defaultValue:"0 0", formatter:function(v) { v += ""; //ensure it's a string return _parsePosition(v.indexOf(" ") === -1 ? v + " " + v : v); //if set to something like "100% 100%", Safari typically reports the computed style as just "100%" (no 2nd value), but we should ensure that there are two values, so copy the first one. Otherwise, it'd be interpreted as "100% 0" (wrong). }}); _registerComplexSpecialProp("perspective", {defaultValue:"0px", prefix:true}); _registerComplexSpecialProp("perspectiveOrigin", {defaultValue:"50% 50%", prefix:true}); _registerComplexSpecialProp("transformStyle", {prefix:true}); _registerComplexSpecialProp("backfaceVisibility", {prefix:true}); _registerComplexSpecialProp("userSelect", {prefix:true}); _registerComplexSpecialProp("margin", {parser:_getEdgeParser("marginTop,marginRight,marginBottom,marginLeft")}); _registerComplexSpecialProp("padding", {parser:_getEdgeParser("paddingTop,paddingRight,paddingBottom,paddingLeft")}); _registerComplexSpecialProp("clip", {defaultValue:"rect(0px,0px,0px,0px)", parser:function(t, e, p, cssp, pt, plugin){ var b, cs, delim; if (_ieVers < 9) { //IE8 and earlier don't report a "clip" value in the currentStyle - instead, the values are split apart into clipTop, clipRight, clipBottom, and clipLeft. Also, in IE7 and earlier, the values inside rect() are space-delimited, not comma-delimited. cs = t.currentStyle; delim = _ieVers < 8 ? " " : ","; b = "rect(" + cs.clipTop + delim + cs.clipRight + delim + cs.clipBottom + delim + cs.clipLeft + ")"; e = this.format(e).split(",").join(delim); } else { b = this.format(_getStyle(t, this.p, _cs, false, this.dflt)); e = this.format(e); } return this.parseComplex(t.style, b, e, pt, plugin); }}); _registerComplexSpecialProp("textShadow", {defaultValue:"0px 0px 0px #999", color:true, multi:true}); _registerComplexSpecialProp("autoRound,strictUnits", {parser:function(t, e, p, cssp, pt) {return pt;}}); //just so that we can ignore these properties (not tween them) _registerComplexSpecialProp("border", {defaultValue:"0px solid #000", parser:function(t, e, p, cssp, pt, plugin) { var bw = _getStyle(t, "borderTopWidth", _cs, false, "0px"), end = this.format(e).split(" "), esfx = end[0].replace(_suffixExp, ""); if (esfx !== "px") { //if we're animating to a non-px value, we need to convert the beginning width to that unit. bw = (parseFloat(bw) / _convertToPixels(t, "borderTopWidth", 1, esfx)) + esfx; } return this.parseComplex(t.style, this.format(bw + " " + _getStyle(t, "borderTopStyle", _cs, false, "solid") + " " + _getStyle(t, "borderTopColor", _cs, false, "#000")), end.join(" "), pt, plugin); }, color:true, formatter:function(v) { var a = v.split(" "); return a[0] + " " + (a[1] || "solid") + " " + (v.match(_colorExp) || ["#000"])[0]; }}); _registerComplexSpecialProp("borderWidth", {parser:_getEdgeParser("borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth")}); //Firefox doesn't pick up on borderWidth set in style sheets (only inline). _registerComplexSpecialProp("float,cssFloat,styleFloat", {parser:function(t, e, p, cssp, pt, plugin) { var s = t.style, prop = ("cssFloat" in s) ? "cssFloat" : "styleFloat"; return new CSSPropTween(s, prop, 0, 0, pt, -1, p, false, 0, s[prop], e); }}); //opacity-related var _setIEOpacityRatio = function(v) { var t = this.t, //refers to the element's style property filters = t.filter || _getStyle(this.data, "filter") || "", val = (this.s + this.c * v) | 0, skip; if (val === 100) { //for older versions of IE that need to use a filter to apply opacity, we should remove the filter if opacity hits 1 in order to improve performance, but make sure there isn't a transform (matrix) or gradient in the filters. if (filters.indexOf("atrix(") === -1 && filters.indexOf("radient(") === -1 && filters.indexOf("oader(") === -1) { t.removeAttribute("filter"); skip = (!_getStyle(this.data, "filter")); //if a class is applied that has an alpha filter, it will take effect (we don't want that), so re-apply our alpha filter in that case. We must first remove it and then check. } else { t.filter = filters.replace(_alphaFilterExp, ""); skip = true; } } if (!skip) { if (this.xn1) { t.filter = filters = filters || ("alpha(opacity=" + val + ")"); //works around bug in IE7/8 that prevents changes to "visibility" from being applied properly if the filter is changed to a different alpha on the same frame. } if (filters.indexOf("pacity") === -1) { //only used if browser doesn't support the standard opacity style property (IE 7 and 8). We omit the "O" to avoid case-sensitivity issues if (val !== 0 || !this.xn1) { //bugs in IE7/8 won't render the filter properly if opacity is ADDED on the same frame/render as "visibility" changes (this.xn1 is 1 if this tween is an "autoAlpha" tween) t.filter = filters + " alpha(opacity=" + val + ")"; //we round the value because otherwise, bugs in IE7/8 can prevent "visibility" changes from being applied properly. } } else { t.filter = filters.replace(_opacityExp, "opacity=" + val); } } }; _registerComplexSpecialProp("opacity,alpha,autoAlpha", {defaultValue:"1", parser:function(t, e, p, cssp, pt, plugin) { var b = parseFloat(_getStyle(t, "opacity", _cs, false, "1")), style = t.style, isAutoAlpha = (p === "autoAlpha"); if (typeof(e) === "string" && e.charAt(1) === "=") { e = ((e.charAt(0) === "-") ? -1 : 1) * parseFloat(e.substr(2)) + b; } if (isAutoAlpha && b === 1 && _getStyle(t, "visibility", _cs) === "hidden" && e !== 0) { //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience) b = 0; } if (_supportsOpacity) { pt = new CSSPropTween(style, "opacity", b, e - b, pt); } else { pt = new CSSPropTween(style, "opacity", b * 100, (e - b) * 100, pt); pt.xn1 = isAutoAlpha ? 1 : 0; //we need to record whether or not this is an autoAlpha so that in the setRatio(), we know to duplicate the setting of the alpha in order to work around a bug in IE7 and IE8 that prevents changes to "visibility" from taking effect if the filter is changed to a different alpha(opacity) at the same time. Setting it to the SAME value first, then the new value works around the IE7/8 bug. style.zoom = 1; //helps correct an IE issue. pt.type = 2; pt.b = "alpha(opacity=" + pt.s + ")"; pt.e = "alpha(opacity=" + (pt.s + pt.c) + ")"; pt.data = t; pt.plugin = plugin; pt.setRatio = _setIEOpacityRatio; } if (isAutoAlpha) { //we have to create the "visibility" PropTween after the opacity one in the linked list so that they run in the order that works properly in IE8 and earlier pt = new CSSPropTween(style, "visibility", 0, 0, pt, -1, null, false, 0, ((b !== 0) ? "inherit" : "hidden"), ((e === 0) ? "hidden" : "inherit")); pt.xs0 = "inherit"; cssp._overwriteProps.push(pt.n); cssp._overwriteProps.push(p); } return pt; }}); var _removeProp = function(s, p) { if (p) { if (s.removeProperty) { if (p.substr(0,2) === "ms" || p.substr(0,6) === "webkit") { //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example) p = "-" + p; } s.removeProperty(p.replace(_capsExp, "-$1").toLowerCase()); } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" s.removeAttribute(p); } } }, _setClassNameRatio = function(v) { this.t._gsClassPT = this; if (v === 1 || v === 0) { this.t.setAttribute("class", (v === 0) ? this.b : this.e); var mpt = this.data, //first MiniPropTween s = this.t.style; while (mpt) { if (!mpt.v) { _removeProp(s, mpt.p); } else { s[mpt.p] = mpt.v; } mpt = mpt._next; } if (v === 1 && this.t._gsClassPT === this) { this.t._gsClassPT = null; } } else if (this.t.getAttribute("class") !== this.e) { this.t.setAttribute("class", this.e); } }; _registerComplexSpecialProp("className", {parser:function(t, e, p, cssp, pt, plugin, vars) { var b = t.getAttribute("class") || "", //don't use t.className because it doesn't work consistently on SVG elements; getAttribute("class") and setAttribute("class", value") is more reliable. cssText = t.style.cssText, difData, bs, cnpt, cnptLookup, mpt; pt = cssp._classNamePT = new CSSPropTween(t, p, 0, 0, pt, 2); pt.setRatio = _setClassNameRatio; pt.pr = -11; _hasPriority = true; pt.b = b; bs = _getAllStyles(t, _cs); //if there's a className tween already operating on the target, force it to its end so that the necessary inline styles are removed and the class name is applied before we determine the end state (we don't want inline styles interfering that were there just for class-specific values) cnpt = t._gsClassPT; if (cnpt) { cnptLookup = {}; mpt = cnpt.data; //first MiniPropTween which stores the inline styles - we need to force these so that the inline styles don't contaminate things. Otherwise, there's a small chance that a tween could start and the inline values match the destination values and they never get cleaned. while (mpt) { cnptLookup[mpt.p] = 1; mpt = mpt._next; } cnpt.setRatio(1); } t._gsClassPT = pt; pt.e = (e.charAt(1) !== "=") ? e : b.replace(new RegExp("(?:\\s|^)" + e.substr(2) + "(?![\\w-])"), "") + ((e.charAt(0) === "+") ? " " + e.substr(2) : ""); t.setAttribute("class", pt.e); difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup); t.setAttribute("class", b); pt.data = difData.firstMPT; t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity). pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself) return pt; }}); var _setClearPropsRatio = function(v) { if (v === 1 || v === 0) if (this.data._totalTime === this.data._totalDuration && this.data.data !== "isFromStart") { //this.data refers to the tween. Only clear at the END of the tween (remember, from() tweens make the ratio go from 1 to 0, so we can't just check that and if the tween is the zero-duration one that's created internally to render the starting values in a from() tween, ignore that because otherwise, for example, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in). var s = this.t.style, transformParse = _specialProps.transform.parse, a, p, i, clearTransform, transform; if (this.e === "all") { s.cssText = ""; clearTransform = true; } else { a = this.e.split(" ").join("").split(","); i = a.length; while (--i > -1) { p = a[i]; if (_specialProps[p]) { if (_specialProps[p].parse === transformParse) { clearTransform = true; } else { p = (p === "transformOrigin") ? _transformOriginProp : _specialProps[p].p; //ensures that special properties use the proper browser-specific property name, like "scaleX" might be "-webkit-transform" or "boxShadow" might be "-moz-box-shadow" } } _removeProp(s, p); } } if (clearTransform) { _removeProp(s, _transformProp); transform = this.t._gsTransform; if (transform) { if (transform.svg) { this.t.removeAttribute("data-svg-origin"); this.t.removeAttribute("transform"); } delete this.t._gsTransform; } } } }; _registerComplexSpecialProp("clearProps", {parser:function(t, e, p, cssp, pt) { pt = new CSSPropTween(t, p, 0, 0, pt, 2); pt.setRatio = _setClearPropsRatio; pt.e = e; pt.pr = -10; pt.data = cssp._tween; _hasPriority = true; return pt; }}); p = "bezier,throwProps,physicsProps,physics2D".split(","); i = p.length; while (i--) { _registerPluginProp(p[i]); } p = CSSPlugin.prototype; p._firstPT = p._lastParsedTransform = p._transform = null; //gets called when the tween renders for the first time. This kicks everything off, recording start/end values, etc. p._onInitTween = function(target, vars, tween, index) { if (!target.nodeType) { //css is only for dom elements return false; } this._target = _target = target; this._tween = tween; this._vars = vars; _index = index; _autoRound = vars.autoRound; _hasPriority = false; _suffixMap = vars.suffixMap || CSSPlugin.suffixMap; _cs = _getComputedStyle(target, ""); _overwriteProps = this._overwriteProps; var style = target.style, v, pt, pt2, first, last, next, zIndex, tpt, threeD; if (_reqSafariFix) if (style.zIndex === "") { v = _getStyle(target, "zIndex", _cs); if (v === "auto" || v === "") { //corrects a bug in [non-Android] Safari that prevents it from repainting elements in their new positions if they don't have a zIndex set. We also can't just apply this inside _parseTransform() because anything that's moved in any way (like using "left" or "top" instead of transforms like "x" and "y") can be affected, so it is best to ensure that anything that's tweening has a z-index. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. Plus zIndex is less memory-intensive. this._addLazySet(style, "zIndex", 0); } } if (typeof(vars) === "string") { first = style.cssText; v = _getAllStyles(target, _cs); style.cssText = first + ";" + vars; v = _cssDif(target, v, _getAllStyles(target)).difs; if (!_supportsOpacity && _opacityValExp.test(vars)) { v.opacity = parseFloat( RegExp.$1 ); } vars = v; style.cssText = first; } if (vars.className) { //className tweens will combine any differences they find in the css with the vars that are passed in, so {className:"myClass", scale:0.5, left:20} would work. this._firstPT = pt = _specialProps.className.parse(target, vars.className, "className", this, null, null, vars); } else { this._firstPT = pt = this.parse(target, vars, null); } if (this._transformType) { threeD = (this._transformType === 3); if (!_transformProp) { style.zoom = 1; //helps correct an IE issue. } else if (_isSafari) { _reqSafariFix = true; //if zIndex isn't set, iOS Safari doesn't repaint things correctly sometimes (seemingly at random). if (style.zIndex === "") { zIndex = _getStyle(target, "zIndex", _cs); if (zIndex === "auto" || zIndex === "") { this._addLazySet(style, "zIndex", 0); } } //Setting WebkitBackfaceVisibility corrects 3 bugs: // 1) [non-Android] Safari skips rendering changes to "top" and "left" that are made on the same frame/render as a transform update. // 2) iOS Safari sometimes neglects to repaint elements in their new positions. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. // 3) Safari sometimes displayed odd artifacts when tweening the transform (or WebkitTransform) property, like ghosts of the edges of the element remained. Definitely a browser bug. //Note: we allow the user to override the auto-setting by defining WebkitBackfaceVisibility in the vars of the tween. if (_isSafariLT6) { this._addLazySet(style, "WebkitBackfaceVisibility", this._vars.WebkitBackfaceVisibility || (threeD ? "visible" : "hidden")); } } pt2 = pt; while (pt2 && pt2._next) { pt2 = pt2._next; } tpt = new CSSPropTween(target, "transform", 0, 0, null, 2); this._linkCSSP(tpt, null, pt2); tpt.setRatio = _transformProp ? _setTransformRatio : _setIETransformRatio; tpt.data = this._transform || _getTransform(target, _cs, true); tpt.tween = tween; tpt.pr = -1; //ensures that the transforms get applied after the components are updated. _overwriteProps.pop(); //we don't want to force the overwrite of all "transform" tweens of the target - we only care about individual transform properties like scaleX, rotation, etc. The CSSPropTween constructor automatically adds the property to _overwriteProps which is why we need to pop() here. } if (_hasPriority) { //reorders the linked list in order of pr (priority) while (pt) { next = pt._next; pt2 = first; while (pt2 && pt2.pr > pt.pr) { pt2 = pt2._next; } if ((pt._prev = pt2 ? pt2._prev : last)) { pt._prev._next = pt; } else { first = pt; } if ((pt._next = pt2)) { pt2._prev = pt; } else { last = pt; } pt = next; } this._firstPT = first; } return true; }; p.parse = function(target, vars, pt, plugin) { var style = target.style, p, sp, bn, en, bs, es, bsfx, esfx, isStr, rel; for (p in vars) { es = vars[p]; //ending value string if (typeof(es) === "function") { es = es(_index, _target); } sp = _specialProps[p]; //SpecialProp lookup. if (sp) { pt = sp.parse(target, es, p, this, pt, plugin, vars); } else { bs = _getStyle(target, p, _cs) + ""; isStr = (typeof(es) === "string"); if (p === "color" || p === "fill" || p === "stroke" || p.indexOf("Color") !== -1 || (isStr && _rgbhslExp.test(es))) { //Opera uses background: to define color sometimes in addition to backgroundColor: if (!isStr) { es = _parseColor(es); es = ((es.length > 3) ? "rgba(" : "rgb(") + es.join(",") + ")"; } pt = _parseComplex(style, p, bs, es, true, "transparent", pt, 0, plugin); } else if (isStr && _complexExp.test(es)) { pt = _parseComplex(style, p, bs, es, true, null, pt, 0, plugin); } else { bn = parseFloat(bs); bsfx = (bn || bn === 0) ? bs.substr((bn + "").length) : ""; //remember, bs could be non-numeric like "normal" for fontWeight, so we should default to a blank suffix in that case. if (bs === "" || bs === "auto") { if (p === "width" || p === "height") { bn = _getDimension(target, p, _cs); bsfx = "px"; } else if (p === "left" || p === "top") { bn = _calculateOffset(target, p, _cs); bsfx = "px"; } else { bn = (p !== "opacity") ? 0 : 1; bsfx = ""; } } rel = (isStr && es.charAt(1) === "="); if (rel) { en = parseInt(es.charAt(0) + "1", 10); es = es.substr(2); en *= parseFloat(es); esfx = es.replace(_suffixExp, ""); } else { en = parseFloat(es); esfx = isStr ? es.replace(_suffixExp, "") : ""; } if (esfx === "") { esfx = (p in _suffixMap) ? _suffixMap[p] : bsfx; //populate the end suffix, prioritizing the map, then if none is found, use the beginning suffix. } es = (en || en === 0) ? (rel ? en + bn : en) + esfx : vars[p]; //ensures that any += or -= prefixes are taken care of. Record the end value before normalizing the suffix because we always want to end the tween on exactly what they intended even if it doesn't match the beginning value's suffix. //if the beginning/ending suffixes don't match, normalize them... if (bsfx !== esfx) if (esfx !== "") if (en || en === 0) if (bn) { //note: if the beginning value (bn) is 0, we don't need to convert units! bn = _convertToPixels(target, p, bn, bsfx); if (esfx === "%") { bn /= _convertToPixels(target, p, 100, "%") / 100; if (vars.strictUnits !== true) { //some browsers report only "px" values instead of allowing "%" with getComputedStyle(), so we assume that if we're tweening to a %, we should start there too unless strictUnits:true is defined. This approach is particularly useful for responsive designs that use from() tweens. bs = bn + "%"; } } else if (esfx === "em" || esfx === "rem" || esfx === "vw" || esfx === "vh") { bn /= _convertToPixels(target, p, 1, esfx); //otherwise convert to pixels. } else if (esfx !== "px") { en = _convertToPixels(target, p, en, esfx); esfx = "px"; //we don't use bsfx after this, so we don't need to set it to px too. } if (rel) if (en || en === 0) { es = (en + bn) + esfx; //the changes we made affect relative calculations, so adjust the end value here. } } if (rel) { en += bn; } if ((bn || bn === 0) && (en || en === 0)) { //faster than isNaN(). Also, previously we required en !== bn but that doesn't really gain much performance and it prevents _parseToProxy() from working properly if beginning and ending values match but need to get tweened by an external plugin anyway. For example, a bezier tween where the target starts at left:0 and has these points: [{left:50},{left:0}] wouldn't work properly because when parsing the last point, it'd match the first (current) one and a non-tweening CSSPropTween would be recorded when we actually need a normal tween (type:0) so that things get updated during the tween properly. pt = new CSSPropTween(style, p, bn, en - bn, pt, 0, p, (_autoRound !== false && (esfx === "px" || p === "zIndex")), 0, bs, es); pt.xs0 = esfx; //DEBUG: _log("tween "+p+" from "+pt.b+" ("+bn+esfx+") to "+pt.e+" with suffix: "+pt.xs0); } else if (style[p] === undefined || !es && (es + "" === "NaN" || es == null)) { _log("invalid " + p + " tween value: " + vars[p]); } else { pt = new CSSPropTween(style, p, en || bn || 0, 0, pt, -1, p, false, 0, bs, es); pt.xs0 = (es === "none" && (p === "display" || p.indexOf("Style") !== -1)) ? bs : es; //intermediate value should typically be set immediately (end value) except for "display" or things like borderTopStyle, borderBottomStyle, etc. which should use the beginning value during the tween. //DEBUG: _log("non-tweening value "+p+": "+pt.xs0); } } } if (plugin) if (pt && !pt.plugin) { pt.plugin = plugin; } } return pt; }; //gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1. p.setRatio = function(v) { var pt = this._firstPT, min = 0.000001, val, str, i; //at the end of the tween, we set the values to exactly what we received in order to make sure non-tweening values (like "position" or "float" or whatever) are set and so that if the beginning/ending suffixes (units) didn't match and we normalized to px, the value that the user passed in is used here. We check to see if the tween is at its beginning in case it's a from() tween in which case the ratio will actually go from 1 to 0 over the course of the tween (backwards). if (v === 1 && (this._tween._time === this._tween._duration || this._tween._time === 0)) { while (pt) { if (pt.type !== 2) { if (pt.r && pt.type !== -1) { val = Math.round(pt.s + pt.c); if (!pt.type) { pt.t[pt.p] = val + pt.xs0; } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)" i = pt.l; str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = str; } } else { pt.t[pt.p] = pt.e; } } else { pt.setRatio(v); } pt = pt._next; } } else if (v || !(this._tween._time === this._tween._duration || this._tween._time === 0) || this._tween._rawPrevTime === -0.000001) { while (pt) { val = pt.c * v + pt.s; if (pt.r) { val = Math.round(val); } else if (val < min) if (val > -min) { val = 0; } if (!pt.type) { pt.t[pt.p] = val + pt.xs0; } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)" i = pt.l; if (i === 2) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2; } else if (i === 3) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3; } else if (i === 4) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4; } else if (i === 5) { pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4 + pt.xn4 + pt.xs5; } else { str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = str; } } else if (pt.type === -1) { //non-tweening value pt.t[pt.p] = pt.xs0; } else if (pt.setRatio) { //custom setRatio() for things like SpecialProps, external plugins, etc. pt.setRatio(v); } pt = pt._next; } //if the tween is reversed all the way back to the beginning, we need to restore the original values which may have different units (like % instead of px or em or whatever). } else { while (pt) { if (pt.type !== 2) { pt.t[pt.p] = pt.b; } else { pt.setRatio(v); } pt = pt._next; } } }; /** * @private * Forces rendering of the target's transforms (rotation, scale, etc.) whenever the CSSPlugin's setRatio() is called. * Basically, this tells the CSSPlugin to create a CSSPropTween (type 2) after instantiation that runs last in the linked * list and calls the appropriate (3D or 2D) rendering function. We separate this into its own method so that we can call * it from other plugins like BezierPlugin if, for example, it needs to apply an autoRotation and this CSSPlugin * doesn't have any transform-related properties of its own. You can call this method as many times as you * want and it won't create duplicate CSSPropTweens. * * @param {boolean} threeD if true, it should apply 3D tweens (otherwise, just 2D ones are fine and typically faster) */ p._enableTransforms = function(threeD) { this._transform = this._transform || _getTransform(this._target, _cs, true); //ensures that the element has a _gsTransform property with the appropriate values. this._transformType = (!(this._transform.svg && _useSVGTransformAttr) && (threeD || this._transformType === 3)) ? 3 : 2; }; var lazySet = function(v) { this.t[this.p] = this.e; this.data._linkCSSP(this, this._next, null, true); //we purposefully keep this._next even though it'd make sense to null it, but this is a performance optimization, as this happens during the while (pt) {} loop in setRatio() at the bottom of which it sets pt = pt._next, so if we null it, the linked list will be broken in that loop. }; /** @private Gives us a way to set a value on the first render (and only the first render). **/ p._addLazySet = function(t, p, v) { var pt = this._firstPT = new CSSPropTween(t, p, 0, 0, this._firstPT, 2); pt.e = v; pt.setRatio = lazySet; pt.data = this; }; /** @private **/ p._linkCSSP = function(pt, next, prev, remove) { if (pt) { if (next) { next._prev = pt; } if (pt._next) { pt._next._prev = pt._prev; } if (pt._prev) { pt._prev._next = pt._next; } else if (this._firstPT === pt) { this._firstPT = pt._next; remove = true; //just to prevent resetting this._firstPT 5 lines down in case pt._next is null. (optimized for speed) } if (prev) { prev._next = pt; } else if (!remove && this._firstPT === null) { this._firstPT = pt; } pt._next = next; pt._prev = prev; } return pt; }; p._mod = function(lookup) { var pt = this._firstPT; while (pt) { if (typeof(lookup[pt.p]) === "function" && lookup[pt.p] === Math.round) { //only gets called by RoundPropsPlugin (ModifyPlugin manages all the rendering internally for CSSPlugin properties that need modification). Remember, we handle rounding a bit differently in this plugin for performance reasons, leveraging "r" as an indicator that the value should be rounded internally.. pt.r = 1; } pt = pt._next; } }; //we need to make sure that if alpha or autoAlpha is killed, opacity is too. And autoAlpha affects the "visibility" property. p._kill = function(lookup) { var copy = lookup, pt, p, xfirst; if (lookup.autoAlpha || lookup.alpha) { copy = {}; for (p in lookup) { //copy the lookup so that we're not changing the original which may be passed elsewhere. copy[p] = lookup[p]; } copy.opacity = 1; if (copy.autoAlpha) { copy.visibility = 1; } } if (lookup.className && (pt = this._classNamePT)) { //for className tweens, we need to kill any associated CSSPropTweens too; a linked list starts at the className's "xfirst". xfirst = pt.xfirst; if (xfirst && xfirst._prev) { this._linkCSSP(xfirst._prev, pt._next, xfirst._prev._prev); //break off the prev } else if (xfirst === this._firstPT) { this._firstPT = pt._next; } if (pt._next) { this._linkCSSP(pt._next, pt._next._next, xfirst._prev); } this._classNamePT = null; } pt = this._firstPT; while (pt) { if (pt.plugin && pt.plugin !== p && pt.plugin._kill) { //for plugins that are registered with CSSPlugin, we should notify them of the kill. pt.plugin._kill(lookup); p = pt.plugin; } pt = pt._next; } return TweenPlugin.prototype._kill.call(this, copy); }; //used by cascadeTo() for gathering all the style properties of each child element into an array for comparison. var _getChildStyles = function(e, props, targets) { var children, i, child, type; if (e.slice) { i = e.length; while (--i > -1) { _getChildStyles(e[i], props, targets); } return; } children = e.childNodes; i = children.length; while (--i > -1) { child = children[i]; type = child.type; if (child.style) { props.push(_getAllStyles(child)); if (targets) { targets.push(child); } } if ((type === 1 || type === 9 || type === 11) && child.childNodes.length) { _getChildStyles(child, props, targets); } } }; /** * Typically only useful for className tweens that may affect child elements, this method creates a TweenLite * and then compares the style properties of all the target's child elements at the tween's start and end, and * if any are different, it also creates tweens for those and returns an array containing ALL of the resulting * tweens (so that you can easily add() them to a TimelineLite, for example). The reason this functionality is * wrapped into a separate static method of CSSPlugin instead of being integrated into all regular className tweens * is because it creates entirely new tweens that may have completely different targets than the original tween, * so if they were all lumped into the original tween instance, it would be inconsistent with the rest of the API * and it would create other problems. For example: * - If I create a tween of elementA, that tween instance may suddenly change its target to include 50 other elements (unintuitive if I specifically defined the target I wanted) * - We can't just create new independent tweens because otherwise, what happens if the original/parent tween is reversed or pause or dropped into a TimelineLite for tight control? You'd expect that tween's behavior to affect all the others. * - Analyzing every style property of every child before and after the tween is an expensive operation when there are many children, so this behavior shouldn't be imposed on all className tweens by default, especially since it's probably rare that this extra functionality is needed. * * @param {Object} target object to be tweened * @param {number} Duration in seconds (or frames for frames-based tweens) * @param {Object} Object containing the end values, like {className:"newClass", ease:Linear.easeNone} * @return {Array} An array of TweenLite instances */ CSSPlugin.cascadeTo = function(target, duration, vars) { var tween = TweenLite.to(target, duration, vars), results = [tween], b = [], e = [], targets = [], _reservedProps = TweenLite._internals.reservedProps, i, difs, p, from; target = tween._targets || tween.target; _getChildStyles(target, b, targets); tween.render(duration, true, true); _getChildStyles(target, e); tween.render(0, true, true); tween._enabled(true); i = targets.length; while (--i > -1) { difs = _cssDif(targets[i], b[i], e[i]); if (difs.firstMPT) { difs = difs.difs; for (p in vars) { if (_reservedProps[p]) { difs[p] = vars[p]; } } from = {}; for (p in difs) { from[p] = b[i][p]; } results.push(TweenLite.fromTo(targets[i], duration, from, difs)); } } return results; }; TweenPlugin.activate([CSSPlugin]); return CSSPlugin; }, true); /* * ---------------------------------------------------------------- * RoundPropsPlugin * ---------------------------------------------------------------- */ (function() { var RoundPropsPlugin = _gsScope._gsDefine.plugin({ propName: "roundProps", version: "1.6.0", priority: -1, API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { this._tween = tween; return true; } }), _roundLinkedList = function(node) { while (node) { if (!node.f && !node.blob) { node.m = Math.round; } node = node._next; } }, p = RoundPropsPlugin.prototype; p._onInitAllProps = function() { var tween = this._tween, rp = (tween.vars.roundProps.join) ? tween.vars.roundProps : tween.vars.roundProps.split(","), i = rp.length, lookup = {}, rpt = tween._propLookup.roundProps, prop, pt, next; while (--i > -1) { lookup[rp[i]] = Math.round; } i = rp.length; while (--i > -1) { prop = rp[i]; pt = tween._firstPT; while (pt) { next = pt._next; //record here, because it may get removed if (pt.pg) { pt.t._mod(lookup); } else if (pt.n === prop) { if (pt.f === 2 && pt.t) { //a blob (text containing multiple numeric values) _roundLinkedList(pt.t._firstPT); } else { this._add(pt.t, prop, pt.s, pt.c); //remove from linked list if (next) { next._prev = pt._prev; } if (pt._prev) { pt._prev._next = next; } else if (tween._firstPT === pt) { tween._firstPT = next; } pt._next = pt._prev = null; tween._propLookup[prop] = rpt; } } pt = next; } } return false; }; p._add = function(target, p, s, c) { this._addTween(target, p, s, s + c, p, Math.round); this._overwriteProps.push(p); }; }()); /* * ---------------------------------------------------------------- * AttrPlugin * ---------------------------------------------------------------- */ (function() { _gsScope._gsDefine.plugin({ propName: "attr", API: 2, version: "0.6.0", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var p, end; if (typeof(target.setAttribute) !== "function") { return false; } for (p in value) { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } this._addTween(target, "setAttribute", target.getAttribute(p) + "", end + "", p, false, p); this._overwriteProps.push(p); } return true; } }); }()); /* * ---------------------------------------------------------------- * DirectionalRotationPlugin * ---------------------------------------------------------------- */ _gsScope._gsDefine.plugin({ propName: "directionalRotation", version: "0.3.0", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { if (typeof(value) !== "object") { value = {rotation:value}; } this.finals = {}; var cap = (value.useRadians === true) ? Math.PI * 2 : 360, min = 0.000001, p, v, start, end, dif, split; for (p in value) { if (p !== "useRadians") { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } split = (end + "").split("_"); v = split[0]; start = parseFloat( (typeof(target[p]) !== "function") ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]() ); end = this.finals[p] = (typeof(v) === "string" && v.charAt(1) === "=") ? start + parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : Number(v) || 0; dif = end - start; if (split.length) { v = split.join("_"); if (v.indexOf("short") !== -1) { dif = dif % cap; if (dif !== dif % (cap / 2)) { dif = (dif < 0) ? dif + cap : dif - cap; } } if (v.indexOf("_cw") !== -1 && dif < 0) { dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } else if (v.indexOf("ccw") !== -1 && dif > 0) { dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } } if (dif > min || dif < -min) { this._addTween(target, p, start, start + dif, p); this._overwriteProps.push(p); } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(ratio) { var pt; if (ratio !== 1) { this._super.setRatio.call(this, ratio); } else { pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](this.finals[pt.p]); } else { pt.t[pt.p] = this.finals[pt.p]; } pt = pt._next; } } } })._autoCSS = true; /* * ---------------------------------------------------------------- * EasePack * ---------------------------------------------------------------- */ _gsScope._gsDefine("easing.Back", ["easing.Ease"], function(Ease) { var w = (_gsScope.GreenSockGlobals || _gsScope), gs = w.com.greensock, _2PI = Math.PI * 2, _HALF_PI = Math.PI / 2, _class = gs._class, _create = function(n, f) { var C = _class("easing." + n, function(){}, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; return C; }, _easeReg = Ease.register || function(){}, //put an empty function in place just as a safety measure in case someone loads an OLD version of TweenLite.js where Ease.register doesn't exist. _wrap = function(name, EaseOut, EaseIn, EaseInOut, aliases) { var C = _class("easing."+name, { easeOut:new EaseOut(), easeIn:new EaseIn(), easeInOut:new EaseInOut() }, true); _easeReg(C, name); return C; }, EasePoint = function(time, value, next) { this.t = time; this.v = value; if (next) { this.next = next; next.prev = this; this.c = next.v - value; this.gap = next.t - time; } }, //Back _createBack = function(n, f) { var C = _class("easing." + n, function(overshoot) { this._p1 = (overshoot || overshoot === 0) ? overshoot : 1.70158; this._p2 = this._p1 * 1.525; }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(overshoot) { return new C(overshoot); }; return C; }, Back = _wrap("Back", _createBack("BackOut", function(p) { return ((p = p - 1) * p * ((this._p1 + 1) * p + this._p1) + 1); }), _createBack("BackIn", function(p) { return p * p * ((this._p1 + 1) * p - this._p1); }), _createBack("BackInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * p * p * ((this._p2 + 1) * p - this._p2) : 0.5 * ((p -= 2) * p * ((this._p2 + 1) * p + this._p2) + 2); }) ), //SlowMo SlowMo = _class("easing.SlowMo", function(linearRatio, power, yoyoMode) { power = (power || power === 0) ? power : 0.7; if (linearRatio == null) { linearRatio = 0.7; } else Iif (linearRatio > 1) { linearRatio = 1; } this._p = (linearRatio !== 1) ? power : 0; this._p1 = (1 - linearRatio) / 2; this._p2 = linearRatio; this._p3 = this._p1 + this._p2; this._calcEnd = (yoyoMode === true); }, true), p = SlowMo.prototype = new Ease(), SteppedEase, RoughEase, _createElastic; p.constructor = SlowMo; p.getRatio = function(p) { var r = p + (0.5 - p) * this._p; if (p < this._p1) { return this._calcEnd ? 1 - ((p = 1 - (p / this._p1)) * p) : r - ((p = 1 - (p / this._p1)) * p * p * p * r); } else if (p > this._p3) { return this._calcEnd ? 1 - (p = (p - this._p3) / this._p1) * p : r + ((p - r) * (p = (p - this._p3) / this._p1) * p * p * p); } return this._calcEnd ? 1 : r; }; SlowMo.ease = new SlowMo(0.7, 0.7); p.config = SlowMo.config = function(linearRatio, power, yoyoMode) { return new SlowMo(linearRatio, power, yoyoMode); }; //SteppedEase SteppedEase = _class("easing.SteppedEase", function(steps) { steps = steps || 1; this._p1 = 1 / steps; this._p2 = steps + 1; }, true); p = SteppedEase.prototype = new Ease(); p.constructor = SteppedEase; p.getRatio = function(p) { if (p < 0) { p = 0; } else if (p >= 1) { p = 0.999999999; } return ((this._p2 * p) >> 0) * this._p1; }; p.config = SteppedEase.config = function(steps) { return new SteppedEase(steps); }; //RoughEase RoughEase = _class("easing.RoughEase", function(vars) { vars = vars || {}; var taper = vars.taper || "none", a = [], cnt = 0, points = (vars.points || 20) | 0, i = points, randomize = (vars.randomize !== false), clamp = (vars.clamp === true), template = (vars.template instanceof Ease) ? vars.template : null, strength = (typeof(vars.strength) === "number") ? vars.strength * 0.4 : 0.4, x, y, bump, invX, obj, pnt; while (--i > -1) { x = randomize ? Math.random() : (1 / points) * i; y = template ? template.getRatio(x) : x; Eif (taper === "none") { bump = strength; } else if (taper === "out") { invX = 1 - x; bump = invX * invX * strength; } else if (taper === "in") { bump = x * x * strength; } else if (x < 0.5) { //"both" (start) invX = x * 2; bump = invX * invX * 0.5 * strength; } else { //"both" (end) invX = (1 - x) * 2; bump = invX * invX * 0.5 * strength; } Eif (randomize) { y += (Math.random() * bump) - (bump * 0.5); } else if (i % 2) { y += bump * 0.5; } else { y -= bump * 0.5; } Iif (clamp) { if (y > 1) { y = 1; } else if (y < 0) { y = 0; } } a[cnt++] = {x:x, y:y}; } a.sort(function(a, b) { return a.x - b.x; }); pnt = new EasePoint(1, 1, null); i = points; while (--i > -1) { obj = a[i]; pnt = new EasePoint(obj.x, obj.y, pnt); } this._prev = new EasePoint(0, 0, (pnt.t !== 0) ? pnt : pnt.next); }, true); p = RoughEase.prototype = new Ease(); p.constructor = RoughEase; p.getRatio = function(p) { var pnt = this._prev; if (p > pnt.t) { while (pnt.next && p >= pnt.t) { pnt = pnt.next; } pnt = pnt.prev; } else { while (pnt.prev && p <= pnt.t) { pnt = pnt.prev; } } this._prev = pnt; return (pnt.v + ((p - pnt.t) / pnt.gap) * pnt.c); }; p.config = function(vars) { return new RoughEase(vars); }; RoughEase.ease = new RoughEase(); //Bounce _wrap("Bounce", _create("BounceOut", function(p) { if (p < 1 / 2.75) { return 7.5625 * p * p; } else if (p < 2 / 2.75) { return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; }), _create("BounceIn", function(p) { if ((p = 1 - p) < 1 / 2.75) { return 1 - (7.5625 * p * p); } else if (p < 2 / 2.75) { return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75); } else if (p < 2.5 / 2.75) { return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375); } return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375); }), _create("BounceInOut", function(p) { var invert = (p < 0.5); if (invert) { p = 1 - (p * 2); } else { p = (p * 2) - 1; } if (p < 1 / 2.75) { p = 7.5625 * p * p; } else if (p < 2 / 2.75) { p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } else { p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; } return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5; }) ); //CIRC _wrap("Circ", _create("CircOut", function(p) { return Math.sqrt(1 - (p = p - 1) * p); }), _create("CircIn", function(p) { return -(Math.sqrt(1 - (p * p)) - 1); }), _create("CircInOut", function(p) { return ((p*=2) < 1) ? -0.5 * (Math.sqrt(1 - p * p) - 1) : 0.5 * (Math.sqrt(1 - (p -= 2) * p) + 1); }) ); //Elastic _createElastic = function(n, f, def) { var C = _class("easing." + n, function(amplitude, period) { this._p1 = (amplitude >= 1) ? amplitude : 1; //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1. this._p2 = (period || def) / (amplitude < 1 ? amplitude : 1); this._p3 = this._p2 / _2PI * (Math.asin(1 / this._p1) || 0); this._p2 = _2PI / this._p2; //precalculate to optimize }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(amplitude, period) { return new C(amplitude, period); }; return C; }; _wrap("Elastic", _createElastic("ElasticOut", function(p) { return this._p1 * Math.pow(2, -10 * p) * Math.sin( (p - this._p3) * this._p2 ) + 1; }, 0.3), _createElastic("ElasticIn", function(p) { return -(this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2 )); }, 0.3), _createElastic("ElasticInOut", function(p) { return ((p *= 2) < 1) ? -0.5 * (this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2)) : this._p1 * Math.pow(2, -10 *(p -= 1)) * Math.sin( (p - this._p3) * this._p2 ) * 0.5 + 1; }, 0.45) ); //Expo _wrap("Expo", _create("ExpoOut", function(p) { return 1 - Math.pow(2, -10 * p); }), _create("ExpoIn", function(p) { return Math.pow(2, 10 * (p - 1)) - 0.001; }), _create("ExpoInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); }) ); //Sine _wrap("Sine", _create("SineOut", function(p) { return Math.sin(p * _HALF_PI); }), _create("SineIn", function(p) { return -Math.cos(p * _HALF_PI) + 1; }), _create("SineInOut", function(p) { return -0.5 * (Math.cos(Math.PI * p) - 1); }) ); _class("easing.EaseLookup", { find:function(s) { return Ease.map[s]; } }, true); //register the non-standard eases _easeReg(w.SlowMo, "SlowMo", "ease,"); _easeReg(RoughEase, "RoughEase", "ease,"); _easeReg(SteppedEase, "SteppedEase", "ease,"); return Back; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case TweenLite was already loaded separately. /* * ---------------------------------------------------------------- * Base classes like TweenLite, SimpleTimeline, Ease, Ticker, etc. * ---------------------------------------------------------------- */ (function(window, moduleName) { "use strict"; var _exports = {}, _doc = window.document, _globals = window.GreenSockGlobals = window.GreenSockGlobals || window; Eif (_globals.TweenLite) { return; //in case the core set of classes is already loaded, don't instantiate twice. } var _namespace = function(ns) { var a = ns.split("."), p = _globals, i; for (i = 0; i < a.length; i++) { p[a[i]] = p = p[a[i]] || {}; } return p; }, gs = _namespace("com.greensock"), _tinyNum = 0.0000000001, _slice = function(a) { //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])) {} return b; }, _emptyFunc = function() {}, _isArray = (function() { //works around issues in iframe environments where the Array global isn't shared, thus if the object originates in a different window/iframe, "(obj instanceof Array)" will evaluate false. We added some speed optimizations to avoid Object.prototype.toString.call() unless it's absolutely necessary because it's VERY slow (like 20x slower) var toString = Object.prototype.toString, array = toString.call([]); return function(obj) { return obj != null && (obj instanceof Array || (typeof(obj) === "object" && !!obj.push && toString.call(obj) === array)); }; }()), a, i, p, _ticker, _tickerActive, _defLookup = {}, /** * @constructor * Defines a GreenSock class, optionally with an array of dependencies that must be instantiated first and passed into the definition. * This allows users to load GreenSock JS files in any order even if they have interdependencies (like CSSPlugin extends TweenPlugin which is * inside TweenLite.js, but if CSSPlugin is loaded first, it should wait to run its code until TweenLite.js loads and instantiates TweenPlugin * and then pass TweenPlugin to CSSPlugin's definition). This is all done automatically and internally. * * Every definition will be added to a "com.greensock" global object (typically window, but if a window.GreenSockGlobals object is found, * it will go there as of v1.7). For example, TweenLite will be found at window.com.greensock.TweenLite and since it's a global class that should be available anywhere, * it is ALSO referenced at window.TweenLite. However some classes aren't considered global, like the base com.greensock.core.Animation class, so * those will only be at the package like window.com.greensock.core.Animation. Again, if you define a GreenSockGlobals object on the window, everything * gets tucked neatly inside there instead of on the window directly. This allows you to do advanced things like load multiple versions of GreenSock * files and put them into distinct objects (imagine a banner ad uses a newer version but the main site uses an older one). In that case, you could * sandbox the banner one like: * * <script> * var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever. * </script> * <script src="js/greensock/v1.7/TweenMax.js"></script> * <script> * window.GreenSockGlobals = window._gsQueue = window._gsDefine = null; //reset it back to null (along with the special _gsQueue variable) so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...) * </script> * <script src="js/greensock/v1.6/TweenMax.js"></script> * <script> * gs.TweenLite.to(...); //would use v1.7 * TweenLite.to(...); //would use v1.6 * </script> * * @param {!string} ns The namespace of the class definition, leaving off "com.greensock." as that's assumed. For example, "TweenLite" or "plugins.CSSPlugin" or "easing.Back". * @param {!Array.<string>} dependencies An array of dependencies (described as their namespaces minus "com.greensock." prefix). For example ["TweenLite","plugins.TweenPlugin","core.Animation"] * @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition. * @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object) */ Definition = function(ns, dependencies, func, global) { this.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses _defLookup[ns] = this; this.gsClass = null; this.func = func; var _classes = []; this.check = function(init) { var i = dependencies.length, missing = i, cur, a, n, cl, hasModule; while (--i > -1) { if ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) { _classes[i] = cur.gsClass; missing--; } else if (init) { cur.sc.push(this); } } if (missing === 0 && func) { a = ("com.greensock." + ns).split("."); n = a.pop(); cl = _namespace(a.join("."))[n] = this.gsClass = func.apply(func, _classes); //exports to multiple environments if (global) { _globals[n] = _exports[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.) hasModule = (typeof(module) !== "undefined" && module.exports); if (!hasModule && typeof(define) === "function" && define.amd){ //AMD define((window.GreenSockAMDPath ? window.GreenSockAMDPath + "/" : "") + ns.split(".").pop(), [], function() { return cl; }); } else if (hasModule){ //node if (ns === moduleName) { module.exports = _exports[moduleName] = cl; for (i in _exports) { cl[i] = _exports[i]; } } else if (_exports[moduleName]) { _exports[moduleName][n] = cl; } } } for (i = 0; i < this.sc.length; i++) { this.sc[i].check(); } } }; this.check(true); }, //used to create Definition instances (which basically registers a class that has dependencies). _gsDefine = window._gsDefine = function(ns, dependencies, func, global) { return new Definition(ns, dependencies, func, global); }, //a quick way to create a class that doesn't have any dependencies. Returns the class, but first registers it in the GreenSock namespace so that other classes can grab it (other classes might be dependent on the class). _class = gs._class = function(ns, func, global) { func = func || function() {}; _gsDefine(ns, [], function(){ return func; }, global); return func; }; _gsDefine.globals = _globals; /* * ---------------------------------------------------------------- * Ease * ---------------------------------------------------------------- */ var _baseParams = [0, 0, 1, 1], _blankArray = [], Ease = _class("easing.Ease", function(func, extraParams, type, power) { this._func = func; this._type = type || 0; this._power = power || 0; this._params = extraParams ? _baseParams.concat(extraParams) : _baseParams; }, true), _easeMap = Ease.map = {}, _easeReg = Ease.register = function(ease, names, types, create) { var na = names.split(","), i = na.length, ta = (types || "easeIn,easeOut,easeInOut").split(","), e, name, j, type; while (--i > -1) { name = na[i]; e = create ? _class("easing."+name, null, true) : gs.easing[name] || {}; j = ta.length; while (--j > -1) { type = ta[j]; _easeMap[name + "." + type] = _easeMap[type + name] = e[type] = ease.getRatio ? ease : ease[type] || new ease(); } } }; p = Ease.prototype; p._calcEnd = false; p.getRatio = function(p) { if (this._func) { this._params[0] = p; return this._func.apply(null, this._params); } var t = this._type, pw = this._power, r = (t === 1) ? 1 - p : (t === 2) ? p : (p < 0.5) ? p * 2 : (1 - p) * 2; if (pw === 1) { r *= r; } else if (pw === 2) { r *= r * r; } else if (pw === 3) { r *= r * r * r; } else if (pw === 4) { r *= r * r * r * r; } return (t === 1) ? 1 - r : (t === 2) ? r : (p < 0.5) ? r / 2 : 1 - (r / 2); }; //create all the standard eases like Linear, Quad, Cubic, Quart, Quint, Strong, Power0, Power1, Power2, Power3, and Power4 (each with easeIn, easeOut, and easeInOut) a = ["Linear","Quad","Cubic","Quart","Quint,Strong"]; i = a.length; while (--i > -1) { p = a[i]+",Power"+i; _easeReg(new Ease(null,null,1,i), p, "easeOut", true); _easeReg(new Ease(null,null,2,i), p, "easeIn" + ((i === 0) ? ",easeNone" : "")); _easeReg(new Ease(null,null,3,i), p, "easeInOut"); } _easeMap.linear = gs.easing.Linear.easeIn; _easeMap.swing = gs.easing.Quad.easeInOut; //for jQuery folks /* * ---------------------------------------------------------------- * EventDispatcher * ---------------------------------------------------------------- */ var EventDispatcher = _class("events.EventDispatcher", function(target) { this._listeners = {}; this._eventTarget = target || this; }); p = EventDispatcher.prototype; p.addEventListener = function(type, callback, scope, useParam, priority) { priority = priority || 0; var list = this._listeners[type], index = 0, listener, i; if (this === _ticker && !_tickerActive) { _ticker.wake(); } if (list == null) { this._listeners[type] = list = []; } i = list.length; while (--i > -1) { listener = list[i]; if (listener.c === callback && listener.s === scope) { list.splice(i, 1); } else if (index === 0 && listener.pr < priority) { index = i + 1; } } list.splice(index, 0, {c:callback, s:scope, up:useParam, pr:priority}); }; p.removeEventListener = function(type, callback) { var list = this._listeners[type], i; if (list) { i = list.length; while (--i > -1) { if (list[i].c === callback) { list.splice(i, 1); return; } } } }; p.dispatchEvent = function(type) { var list = this._listeners[type], i, t, listener; if (list) { i = list.length; if (i > 1) { list = list.slice(0); //in case addEventListener() is called from within a listener/callback (otherwise the index could change, resulting in a skip) } t = this._eventTarget; while (--i > -1) { listener = list[i]; if (listener) { if (listener.up) { listener.c.call(listener.s || t, {type:type, target:t}); } else { listener.c.call(listener.s || t); } } } } }; /* * ---------------------------------------------------------------- * Ticker * ---------------------------------------------------------------- */ var _reqAnimFrame = window.requestAnimationFrame, _cancelAnimFrame = window.cancelAnimationFrame, _getTime = Date.now || function() {return new Date().getTime();}, _lastUpdate = _getTime(); //now try to determine the requestAnimationFrame and cancelAnimationFrame functions and if none are found, we'll use a setTimeout()/clearTimeout() polyfill. a = ["ms","moz","webkit","o"]; i = a.length; while (--i > -1 && !_reqAnimFrame) { _reqAnimFrame = window[a[i] + "RequestAnimationFrame"]; _cancelAnimFrame = window[a[i] + "CancelAnimationFrame"] || window[a[i] + "CancelRequestAnimationFrame"]; } _class("Ticker", function(fps, useRAF) { var _self = this, _startTime = _getTime(), _useRAF = (useRAF !== false && _reqAnimFrame) ? "auto" : false, _lagThreshold = 500, _adjustedLag = 33, _tickWord = "tick", //helps reduce gc burden _fps, _req, _id, _gap, _nextTime, _tick = function(manual) { var elapsed = _getTime() - _lastUpdate, overlap, dispatch; if (elapsed > _lagThreshold) { _startTime += elapsed - _adjustedLag; } _lastUpdate += elapsed; _self.time = (_lastUpdate - _startTime) / 1000; overlap = _self.time - _nextTime; if (!_fps || overlap > 0 || manual === true) { _self.frame++; _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap); dispatch = true; } if (manual !== true) { //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise. _id = _req(_tick); } if (dispatch) { _self.dispatchEvent(_tickWord); } }; EventDispatcher.call(_self); _self.time = _self.frame = 0; _self.tick = function() { _tick(true); }; _self.lagSmoothing = function(threshold, adjustedLag) { _lagThreshold = threshold || (1 / _tinyNum); //zero should be interpreted as basically unlimited _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0); }; _self.sleep = function() { if (_id == null) { return; } if (!_useRAF || !_cancelAnimFrame) { clearTimeout(_id); } else { _cancelAnimFrame(_id); } _req = _emptyFunc; _id = null; if (_self === _ticker) { _tickerActive = false; } }; _self.wake = function(seamless) { if (_id !== null) { _self.sleep(); } else if (seamless) { _startTime += -_lastUpdate + (_lastUpdate = _getTime()); } else if (_self.frame > 10) { //don't trigger lagSmoothing if we're just waking up, and make sure that at least 10 frames have elapsed because of the iOS bug that we work around below with the 1.5-second setTimout(). _lastUpdate = _getTime() - _lagThreshold + 5; } _req = (_fps === 0) ? _emptyFunc : (!_useRAF || !_reqAnimFrame) ? function(f) { return setTimeout(f, ((_nextTime - _self.time) * 1000 + 1) | 0); } : _reqAnimFrame; if (_self === _ticker) { _tickerActive = true; } _tick(2); }; _self.fps = function(value) { if (!arguments.length) { return _fps; } _fps = value; _gap = 1 / (_fps || 60); _nextTime = this.time + _gap; _self.wake(); }; _self.useRAF = function(value) { if (!arguments.length) { return _useRAF; } _self.sleep(); _useRAF = value; _self.fps(_fps); }; _self.fps(fps); //a bug in iOS 6 Safari occasionally prevents the requestAnimationFrame from working initially, so we use a 1.5-second timeout that automatically falls back to setTimeout() if it senses this condition. setTimeout(function() { if (_useRAF === "auto" && _self.frame < 5 && _doc.visibilityState !== "hidden") { _self.useRAF(false); } }, 1500); }); p = gs.Ticker.prototype = new gs.events.EventDispatcher(); p.constructor = gs.Ticker; /* * ---------------------------------------------------------------- * Animation * ---------------------------------------------------------------- */ var Animation = _class("core.Animation", function(duration, vars) { this.vars = vars = vars || {}; this._duration = this._totalDuration = duration || 0; this._delay = Number(vars.delay) || 0; this._timeScale = 1; this._active = (vars.immediateRender === true); this.data = vars.data; this._reversed = (vars.reversed === true); if (!_rootTimeline) { return; } if (!_tickerActive) { //some browsers (like iOS 6 Safari) shut down JavaScript execution when the tab is disabled and they [occasionally] neglect to start up requestAnimationFrame again when returning - this code ensures that the engine starts up again properly. _ticker.wake(); } var tl = this.vars.useFrames ? _rootFramesTimeline : _rootTimeline; tl.add(this, tl._time); if (this.vars.paused) { this.paused(true); } }); _ticker = Animation.ticker = new gs.Ticker(); p = Animation.prototype; p._dirty = p._gc = p._initted = p._paused = false; p._totalTime = p._time = 0; p._rawPrevTime = -1; p._next = p._last = p._onUpdate = p._timeline = p.timeline = null; p._paused = false; //some browsers (like iOS) occasionally drop the requestAnimationFrame event when the user switches to a different tab and then comes back again, so we use a 2-second setTimeout() to sense if/when that condition occurs and then wake() the ticker. var _checkTimeout = function() { if (_tickerActive && _getTime() - _lastUpdate > 2000) { _ticker.wake(); } setTimeout(_checkTimeout, 2000); }; _checkTimeout(); p.play = function(from, suppressEvents) { if (from != null) { this.seek(from, suppressEvents); } return this.reversed(false).paused(false); }; p.pause = function(atTime, suppressEvents) { if (atTime != null) { this.seek(atTime, suppressEvents); } return this.paused(true); }; p.resume = function(from, suppressEvents) { if (from != null) { this.seek(from, suppressEvents); } return this.paused(false); }; p.seek = function(time, suppressEvents) { return this.totalTime(Number(time), suppressEvents !== false); }; p.restart = function(includeDelay, suppressEvents) { return this.reversed(false).paused(false).totalTime(includeDelay ? -this._delay : 0, (suppressEvents !== false), true); }; p.reverse = function(from, suppressEvents) { if (from != null) { this.seek((from || this.totalDuration()), suppressEvents); } return this.reversed(true).paused(false); }; p.render = function(time, suppressEvents, force) { //stub - we override this method in subclasses. }; p.invalidate = function() { this._time = this._totalTime = 0; this._initted = this._gc = false; this._rawPrevTime = -1; if (this._gc || !this.timeline) { this._enabled(true); } return this; }; p.isActive = function() { var tl = this._timeline, //the 2 root timelines won't have a _timeline; they're always active. startTime = this._startTime, rawTime; return (!tl || (!this._gc && !this._paused && tl.isActive() && (rawTime = tl.rawTime(true)) >= startTime && rawTime < startTime + this.totalDuration() / this._timeScale)); }; p._enabled = function (enabled, ignoreTimeline) { if (!_tickerActive) { _ticker.wake(); } this._gc = !enabled; this._active = this.isActive(); if (ignoreTimeline !== true) { if (enabled && !this.timeline) { this._timeline.add(this, this._startTime - this._delay); } else if (!enabled && this.timeline) { this._timeline._remove(this, true); } } return false; }; p._kill = function(vars, target) { return this._enabled(false, false); }; p.kill = function(vars, target) { this._kill(vars, target); return this; }; p._uncache = function(includeSelf) { var tween = includeSelf ? this : this.timeline; while (tween) { tween._dirty = true; tween = tween.timeline; } return this; }; p._swapSelfInParams = function(params) { var i = params.length, copy = params.concat(); while (--i > -1) { if (params[i] === "{self}") { copy[i] = this; } } return copy; }; p._callback = function(type) { var v = this.vars, callback = v[type], params = v[type + "Params"], scope = v[type + "Scope"] || v.callbackScope || this, l = params ? params.length : 0; switch (l) { //speed optimization; call() is faster than apply() so use it when there are only a few parameters (which is by far most common). Previously we simply did var v = this.vars; v[type].apply(v[type + "Scope"] || v.callbackScope || this, v[type + "Params"] || _blankArray); case 0: callback.call(scope); break; case 1: callback.call(scope, params[0]); break; case 2: callback.call(scope, params[0], params[1]); break; default: callback.apply(scope, params); } }; //----Animation getters/setters -------------------------------------------------------- p.eventCallback = function(type, callback, params, scope) { if ((type || "").substr(0,2) === "on") { var v = this.vars; if (arguments.length === 1) { return v[type]; } if (callback == null) { delete v[type]; } else { v[type] = callback; v[type + "Params"] = (_isArray(params) && params.join("").indexOf("{self}") !== -1) ? this._swapSelfInParams(params) : params; v[type + "Scope"] = scope; } if (type === "onUpdate") { this._onUpdate = callback; } } return this; }; p.delay = function(value) { if (!arguments.length) { return this._delay; } if (this._timeline.smoothChildTiming) { this.startTime( this._startTime + value - this._delay ); } this._delay = value; return this; }; p.duration = function(value) { if (!arguments.length) { this._dirty = false; return this._duration; } this._duration = this._totalDuration = value; this._uncache(true); //true in case it's a TweenMax or TimelineMax that has a repeat - we'll need to refresh the totalDuration. if (this._timeline.smoothChildTiming) if (this._time > 0) if (this._time < this._duration) if (value !== 0) { this.totalTime(this._totalTime * (value / this._duration), true); } return this; }; p.totalDuration = function(value) { this._dirty = false; return (!arguments.length) ? this._totalDuration : this.duration(value); }; p.time = function(value, suppressEvents) { if (!arguments.length) { return this._time; } if (this._dirty) { this.totalDuration(); } return this.totalTime((value > this._duration) ? this._duration : value, suppressEvents); }; p.totalTime = function(time, suppressEvents, uncapped) { if (!_tickerActive) { _ticker.wake(); } if (!arguments.length) { return this._totalTime; } if (this._timeline) { if (time < 0 && !uncapped) { time += this.totalDuration(); } if (this._timeline.smoothChildTiming) { if (this._dirty) { this.totalDuration(); } var totalDuration = this._totalDuration, tl = this._timeline; if (time > totalDuration && !uncapped) { time = totalDuration; } this._startTime = (this._paused ? this._pauseTime : tl._time) - ((!this._reversed ? time : totalDuration - time) / this._timeScale); if (!tl._dirty) { //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here. this._uncache(false); } //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The startTime of that child would get pushed out, but one of the ancestors may have completed. if (tl._timeline) { while (tl._timeline) { if (tl._timeline._time !== (tl._startTime + tl._totalTime) / tl._timeScale) { tl.totalTime(tl._totalTime, true); } tl = tl._timeline; } } } if (this._gc) { this._enabled(true, false); } if (this._totalTime !== time || this._duration === 0) { if (_lazyTweens.length) { _lazyRender(); } this.render(time, suppressEvents, false); if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render. _lazyRender(); } } } return this; }; p.progress = p.totalProgress = function(value, suppressEvents) { var duration = this.duration(); return (!arguments.length) ? (duration ? this._time / duration : this.ratio) : this.totalTime(duration * value, suppressEvents); }; p.startTime = function(value) { if (!arguments.length) { return this._startTime; } if (value !== this._startTime) { this._startTime = value; if (this.timeline) if (this.timeline._sortChildren) { this.timeline.add(this, value - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct. } } return this; }; p.endTime = function(includeRepeats) { return this._startTime + ((includeRepeats != false) ? this.totalDuration() : this.duration()) / this._timeScale; }; p.timeScale = function(value) { if (!arguments.length) { return this._timeScale; } value = value || _tinyNum; //can't allow zero because it'll throw the math off if (this._timeline && this._timeline.smoothChildTiming) { var pauseTime = this._pauseTime, t = (pauseTime || pauseTime === 0) ? pauseTime : this._timeline.totalTime(); this._startTime = t - ((t - this._startTime) * this._timeScale / value); } this._timeScale = value; return this._uncache(false); }; p.reversed = function(value) { if (!arguments.length) { return this._reversed; } if (value != this._reversed) { this._reversed = value; this.totalTime(((this._timeline && !this._timeline.smoothChildTiming) ? this.totalDuration() - this._totalTime : this._totalTime), true); } return this; }; p.paused = function(value) { if (!arguments.length) { return this._paused; } var tl = this._timeline, raw, elapsed; if (value != this._paused) if (tl) { if (!_tickerActive && !value) { _ticker.wake(); } raw = tl.rawTime(); elapsed = raw - this._pauseTime; if (!value && tl.smoothChildTiming) { this._startTime += elapsed; this._uncache(false); } this._pauseTime = value ? raw : null; this._paused = value; this._active = this.isActive(); if (!value && elapsed !== 0 && this._initted && this.duration()) { raw = tl.smoothChildTiming ? this._totalTime : (raw - this._startTime) / this._timeScale; this.render(raw, (raw === this._totalTime), true); //in case the target's properties changed via some other tween or manual update by the user, we should force a render. } } if (this._gc && !value) { this._enabled(true, false); } return this; }; /* * ---------------------------------------------------------------- * SimpleTimeline * ---------------------------------------------------------------- */ var SimpleTimeline = _class("core.SimpleTimeline", function(vars) { Animation.call(this, 0, vars); this.autoRemoveChildren = this.smoothChildTiming = true; }); p = SimpleTimeline.prototype = new Animation(); p.constructor = SimpleTimeline; p.kill()._gc = false; p._first = p._last = p._recent = null; p._sortChildren = false; p.add = p.insert = function(child, position, align, stagger) { var prevTween, st; child._startTime = Number(position || 0) + child._delay; if (child._paused) if (this !== child._timeline) { //we only adjust the _pauseTime if it wasn't in this timeline already. Remember, sometimes a tween will be inserted again into the same timeline when its startTime is changed so that the tweens in the TimelineLite/Max are re-ordered properly in the linked list (so everything renders in the proper order). child._pauseTime = child._startTime + ((this.rawTime() - child._startTime) / child._timeScale); } if (child.timeline) { child.timeline._remove(child, true); //removes from existing timeline so that it can be properly added to this one. } child.timeline = child._timeline = this; if (child._gc) { child._enabled(true, true); } prevTween = this._last; if (this._sortChildren) { st = child._startTime; while (prevTween && prevTween._startTime > st) { prevTween = prevTween._prev; } } if (prevTween) { child._next = prevTween._next; prevTween._next = child; } else { child._next = this._first; this._first = child; } if (child._next) { child._next._prev = child; } else { this._last = child; } child._prev = prevTween; this._recent = child; if (this._timeline) { this._uncache(true); } return this; }; p._remove = function(tween, skipDisable) { if (tween.timeline === this) { if (!skipDisable) { tween._enabled(false, true); } if (tween._prev) { tween._prev._next = tween._next; } else if (this._first === tween) { this._first = tween._next; } if (tween._next) { tween._next._prev = tween._prev; } else if (this._last === tween) { this._last = tween._prev; } tween._next = tween._prev = tween.timeline = null; if (tween === this._recent) { this._recent = this._last; } if (this._timeline) { this._uncache(true); } } return this; }; p.render = function(time, suppressEvents, force) { var tween = this._first, next; this._totalTime = this._time = this._rawPrevTime = time; while (tween) { next = tween._next; //record it here because the value could change after rendering... if (tween._active || (time >= tween._startTime && !tween._paused)) { if (!tween._reversed) { tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force); } } tween = next; } }; p.rawTime = function() { if (!_tickerActive) { _ticker.wake(); } return this._totalTime; }; /* * ---------------------------------------------------------------- * TweenLite * ---------------------------------------------------------------- */ var TweenLite = _class("TweenLite", function(target, duration, vars) { Animation.call(this, duration, vars); this.render = TweenLite.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method) if (target == null) { throw "Cannot tween a null target."; } this.target = target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target; var isSelector = (target.jquery || (target.length && target !== window && target[0] && (target[0] === window || (target[0].nodeType && target[0].style && !target.nodeType)))), overwrite = this.vars.overwrite, i, targ, targets; this._overwrite = overwrite = (overwrite == null) ? _overwriteLookup[TweenLite.defaultOverwrite] : (typeof(overwrite) === "number") ? overwrite >> 0 : _overwriteLookup[overwrite]; if ((isSelector || target instanceof Array || (target.push && _isArray(target))) && typeof(target[0]) !== "number") { this._targets = targets = _slice(target); //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() this._propLookup = []; this._siblings = []; for (i = 0; i < targets.length; i++) { targ = targets[i]; if (!targ) { targets.splice(i--, 1); continue; } else if (typeof(targ) === "string") { targ = targets[i--] = TweenLite.selector(targ); //in case it's an array of strings if (typeof(targ) === "string") { targets.splice(i+1, 1); //to avoid an endless loop (can't imagine why the selector would return a string, but just in case) } continue; } else if (targ.length && targ !== window && targ[0] && (targ[0] === window || (targ[0].nodeType && targ[0].style && !targ.nodeType))) { //in case the user is passing in an array of selector objects (like jQuery objects), we need to check one more level and pull things out if necessary. Also note that <select> elements pass all the criteria regarding length and the first child having style, so we must also check to ensure the target isn't an HTML node itself. targets.splice(i--, 1); this._targets = targets = targets.concat(_slice(targ)); continue; } this._siblings[i] = _register(targ, this, false); if (overwrite === 1) if (this._siblings[i].length > 1) { _applyOverwrite(targ, this, null, 1, this._siblings[i]); } } } else { this._propLookup = {}; this._siblings = _register(target, this, false); if (overwrite === 1) if (this._siblings.length > 1) { _applyOverwrite(target, this, null, 1, this._siblings); } } if (this.vars.immediateRender || (duration === 0 && this._delay === 0 && this.vars.immediateRender !== false)) { this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render) this.render(Math.min(0, -this._delay)); //in case delay is negative } }, true), _isSelector = function(v) { return (v && v.length && v !== window && v[0] && (v[0] === window || (v[0].nodeType && v[0].style && !v.nodeType))); //we cannot check "nodeType" if the target is window from within an iframe, otherwise it will trigger a security error in some browsers like Firefox. }, _autoCSS = function(vars, target) { var css = {}, p; for (p in vars) { if (!_reservedProps[p] && (!(p in target) || p === "transform" || p === "x" || p === "y" || p === "width" || p === "height" || p === "className" || p === "border") && (!_plugins[p] || (_plugins[p] && _plugins[p]._autoCSS))) { //note: <img> elements contain read-only "x" and "y" properties. We should also prioritize editing css width/height rather than the element's properties. css[p] = vars[p]; delete vars[p]; } } vars.css = css; }; p = TweenLite.prototype = new Animation(); p.constructor = TweenLite; p.kill()._gc = false; //----TweenLite defaults, overwrite management, and root updates ---------------------------------------------------- p.ratio = 0; p._firstPT = p._targets = p._overwrittenProps = p._startAt = null; p._notifyPluginsOfEnabled = p._lazy = false; TweenLite.version = "1.19.1"; TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1); TweenLite.defaultOverwrite = "auto"; TweenLite.ticker = _ticker; TweenLite.autoSleep = 120; TweenLite.lagSmoothing = function(threshold, adjustedLag) { _ticker.lagSmoothing(threshold, adjustedLag); }; TweenLite.selector = window.$ || window.jQuery || function(e) { var selector = window.$ || window.jQuery; if (selector) { TweenLite.selector = selector; return selector(e); } return (typeof(_doc) === "undefined") ? e : (_doc.querySelectorAll ? _doc.querySelectorAll(e) : _doc.getElementById((e.charAt(0) === "#") ? e.substr(1) : e)); }; var _lazyTweens = [], _lazyLookup = {}, _numbersExp = /(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, //_nonNumbersExp = /(?:([\-+](?!(\d|=)))|[^\d\-+=e]|(e(?![\-+][\d])))+/ig, _setRatio = function(v) { var pt = this._firstPT, min = 0.000001, val; while (pt) { val = !pt.blob ? pt.c * v + pt.s : (v === 1) ? this.end : v ? this.join("") : this.start; if (pt.m) { val = pt.m(val, this._target || pt.t); } else if (val < min) if (val > -min && !pt.blob) { //prevents issues with converting very small numbers to strings in the browser val = 0; } if (!pt.f) { pt.t[pt.p] = val; } else if (pt.fp) { pt.t[pt.p](pt.fp, val); } else { pt.t[pt.p](val); } pt = pt._next; } }, //compares two strings (start/end), finds the numbers that are different and spits back an array representing the whole value but with the changing values isolated as elements. For example, "rgb(0,0,0)" and "rgb(100,50,0)" would become ["rgb(", 0, ",", 50, ",0)"]. Notice it merges the parts that are identical (performance optimization). The array also has a linked list of PropTweens attached starting with _firstPT that contain the tweening data (t, p, s, c, f, etc.). It also stores the starting value as a "start" property so that we can revert to it if/when necessary, like when a tween rewinds fully. If the quantity of numbers differs between the start and end, it will always prioritize the end value(s). The pt parameter is optional - it's for a PropTween that will be appended to the end of the linked list and is typically for actually setting the value after all of the elements have been updated (with array.join("")). _blobDif = function(start, end, filter, pt) { var a = [], charIndex = 0, s = "", color = 0, startNums, endNums, num, i, l, nonNumbers, currentNum; a.start = start; a.end = end; start = a[0] = start + ""; //ensure values are strings end = a[1] = end + ""; if (filter) { filter(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values. start = a[0]; end = a[1]; } a.length = 0; startNums = start.match(_numbersExp) || []; endNums = end.match(_numbersExp) || []; if (pt) { pt._next = null; pt.blob = 1; a._firstPT = a._applyPT = pt; //apply last in the linked list (which means inserting it first) } l = endNums.length; for (i = 0; i < l; i++) { currentNum = endNums[i]; nonNumbers = end.substr(charIndex, end.indexOf(currentNum, charIndex)-charIndex); s += (nonNumbers || !i) ? nonNumbers : ","; //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case. charIndex += nonNumbers.length; if (color) { //sense rgba() values and round them. color = (color + 1) % 5; } else if (nonNumbers.substr(-5) === "rgba(") { color = 1; } if (currentNum === startNums[i] || startNums.length <= i) { s += currentNum; } else { if (s) { a.push(s); s = ""; } num = parseFloat(startNums[i]); a.push(num); a._firstPT = {_next: a._firstPT, t:a, p: a.length-1, s:num, c:((currentNum.charAt(1) === "=") ? parseInt(currentNum.charAt(0) + "1", 10) * parseFloat(currentNum.substr(2)) : (parseFloat(currentNum) - num)) || 0, f:0, m:(color && color < 4) ? Math.round : 0}; //note: we don't set _prev because we'll never need to remove individual PropTweens from this list. } charIndex += currentNum.length; } s += end.substr(charIndex); if (s) { a.push(s); } a.setRatio = _setRatio; return a; }, //note: "funcParam" is only necessary for function-based getters/setters that require an extra parameter like getAttribute("width") and setAttribute("width", value). In this example, funcParam would be "width". Used by AttrPlugin for example. _addPropTween = function(target, prop, start, end, overwriteProp, mod, funcParam, stringFilter, index) { if (typeof(end) === "function") { end = end(index || 0, target); } var type = typeof(target[prop]), getterName = (type !== "function") ? "" : ((prop.indexOf("set") || typeof(target["get" + prop.substr(3)]) !== "function") ? prop : "get" + prop.substr(3)), s = (start !== "get") ? start : !getterName ? target[prop] : funcParam ? target[getterName](funcParam) : target[getterName](), isRelative = (typeof(end) === "string" && end.charAt(1) === "="), pt = {t:target, p:prop, s:s, f:(type === "function"), pg:0, n:overwriteProp || prop, m:(!mod ? 0 : (typeof(mod) === "function") ? mod : Math.round), pr:0, c:isRelative ? parseInt(end.charAt(0) + "1", 10) * parseFloat(end.substr(2)) : (parseFloat(end) - s) || 0}, blob; if (typeof(s) !== "number" || (typeof(end) !== "number" && !isRelative)) { if (funcParam || isNaN(s) || (!isRelative && isNaN(end)) || typeof(s) === "boolean" || typeof(end) === "boolean") { //a blob (string that has multiple numbers in it) pt.fp = funcParam; blob = _blobDif(s, (isRelative ? pt.s + pt.c : end), stringFilter || TweenLite.defaultStringFilter, pt); pt = {t: blob, p: "setRatio", s: 0, c: 1, f: 2, pg: 0, n: overwriteProp || prop, pr: 0, m: 0}; //"2" indicates it's a Blob property tween. Needed for RoundPropsPlugin for example. } else { pt.s = parseFloat(s); if (!isRelative) { pt.c = (parseFloat(end) - pt.s) || 0; } } } if (pt.c) { //only add it to the linked list if there's a change. if ((pt._next = this._firstPT)) { pt._next._prev = pt; } this._firstPT = pt; return pt; } }, _internals = TweenLite._internals = {isArray:_isArray, isSelector:_isSelector, lazyTweens:_lazyTweens, blobDif:_blobDif}, //gives us a way to expose certain private values to other GreenSock classes without contaminating tha main TweenLite object. _plugins = TweenLite._plugins = {}, _tweenLookup = _internals.tweenLookup = {}, _tweenLookupNum = 0, _reservedProps = _internals.reservedProps = {ease:1, delay:1, overwrite:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, runBackwards:1, startAt:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, autoCSS:1, lazy:1, onOverwrite:1, callbackScope:1, stringFilter:1, id:1}, _overwriteLookup = {none:0, all:1, auto:2, concurrent:3, allOnStart:4, preexisting:5, "true":1, "false":0}, _rootFramesTimeline = Animation._rootFramesTimeline = new SimpleTimeline(), _rootTimeline = Animation._rootTimeline = new SimpleTimeline(), _nextGCFrame = 30, _lazyRender = _internals.lazyRender = function() { var i = _lazyTweens.length, tween; _lazyLookup = {}; while (--i > -1) { tween = _lazyTweens[i]; if (tween && tween._lazy !== false) { tween.render(tween._lazy[0], tween._lazy[1], true); tween._lazy = false; } } _lazyTweens.length = 0; }; _rootTimeline._startTime = _ticker.time; _rootFramesTimeline._startTime = _ticker.frame; _rootTimeline._active = _rootFramesTimeline._active = true; setTimeout(_lazyRender, 1); //on some mobile devices, there isn't a "tick" before code runs which means any lazy renders wouldn't run before the next official "tick". Animation._updateRoot = TweenLite.render = function() { var i, a, p; if (_lazyTweens.length) { //if code is run outside of the requestAnimationFrame loop, there may be tweens queued AFTER the engine refreshed, so we need to ensure any pending renders occur before we refresh again. _lazyRender(); } _rootTimeline.render((_ticker.time - _rootTimeline._startTime) * _rootTimeline._timeScale, false, false); _rootFramesTimeline.render((_ticker.frame - _rootFramesTimeline._startTime) * _rootFramesTimeline._timeScale, false, false); if (_lazyTweens.length) { _lazyRender(); } if (_ticker.frame >= _nextGCFrame) { //dump garbage every 120 frames or whatever the user sets TweenLite.autoSleep to _nextGCFrame = _ticker.frame + (parseInt(TweenLite.autoSleep, 10) || 120); for (p in _tweenLookup) { a = _tweenLookup[p].tweens; i = a.length; while (--i > -1) { if (a[i]._gc) { a.splice(i, 1); } } if (a.length === 0) { delete _tweenLookup[p]; } } //if there are no more tweens in the root timelines, or if they're all paused, make the _timer sleep to reduce load on the CPU slightly p = _rootTimeline._first; if (!p || p._paused) if (TweenLite.autoSleep && !_rootFramesTimeline._first && _ticker._listeners.tick.length === 1) { while (p && p._paused) { p = p._next; } if (!p) { _ticker.sleep(); } } } }; _ticker.addEventListener("tick", Animation._updateRoot); var _register = function(target, tween, scrub) { var id = target._gsTweenID, a, i; if (!_tweenLookup[id || (target._gsTweenID = id = "t" + (_tweenLookupNum++))]) { _tweenLookup[id] = {target:target, tweens:[]}; } if (tween) { a = _tweenLookup[id].tweens; a[(i = a.length)] = tween; if (scrub) { while (--i > -1) { if (a[i] === tween) { a.splice(i, 1); } } } } return _tweenLookup[id].tweens; }, _onOverwrite = function(overwrittenTween, overwritingTween, target, killedProps) { var func = overwrittenTween.vars.onOverwrite, r1, r2; if (func) { r1 = func(overwrittenTween, overwritingTween, target, killedProps); } func = TweenLite.onOverwrite; if (func) { r2 = func(overwrittenTween, overwritingTween, target, killedProps); } return (r1 !== false && r2 !== false); }, _applyOverwrite = function(target, tween, props, mode, siblings) { var i, changed, curTween, l; if (mode === 1 || mode >= 4) { l = siblings.length; for (i = 0; i < l; i++) { if ((curTween = siblings[i]) !== tween) { if (!curTween._gc) { if (curTween._kill(null, target, tween)) { changed = true; } } } else if (mode === 5) { break; } } return changed; } //NOTE: Add 0.0000000001 to overcome floating point errors that can cause the startTime to be VERY slightly off (when a tween's time() is set for example) var startTime = tween._startTime + _tinyNum, overlaps = [], oCount = 0, zeroDur = (tween._duration === 0), globalStart; i = siblings.length; while (--i > -1) { if ((curTween = siblings[i]) === tween || curTween._gc || curTween._paused) { //ignore } else if (curTween._timeline !== tween._timeline) { globalStart = globalStart || _checkOverlap(tween, 0, zeroDur); if (_checkOverlap(curTween, globalStart, zeroDur) === 0) { overlaps[oCount++] = curTween; } } else if (curTween._startTime <= startTime) if (curTween._startTime + curTween.totalDuration() / curTween._timeScale > startTime) if (!((zeroDur || !curTween._initted) && startTime - curTween._startTime <= 0.0000000002)) { overlaps[oCount++] = curTween; } } i = oCount; while (--i > -1) { curTween = overlaps[i]; if (mode === 2) if (curTween._kill(props, target, tween)) { changed = true; } if (mode !== 2 || (!curTween._firstPT && curTween._initted)) { if (mode !== 2 && !_onOverwrite(curTween, tween)) { continue; } if (curTween._enabled(false, false)) { //if all property tweens have been overwritten, kill the tween. changed = true; } } } return changed; }, _checkOverlap = function(tween, reference, zeroDur) { var tl = tween._timeline, ts = tl._timeScale, t = tween._startTime; while (tl._timeline) { t += tl._startTime; ts *= tl._timeScale; if (tl._paused) { return -100; } tl = tl._timeline; } t /= ts; return (t > reference) ? t - reference : ((zeroDur && t === reference) || (!tween._initted && t - reference < 2 * _tinyNum)) ? _tinyNum : ((t += tween.totalDuration() / tween._timeScale / ts) > reference + _tinyNum) ? 0 : t - reference - _tinyNum; }; //---- TweenLite instance methods ----------------------------------------------------------------------------- p._init = function() { var v = this.vars, op = this._overwrittenProps, dur = this._duration, immediate = !!v.immediateRender, ease = v.ease, i, initPlugins, pt, p, startVars, l; if (v.startAt) { if (this._startAt) { this._startAt.render(-1, true); //if we've run a startAt previously (when the tween instantiated), we should revert it so that the values re-instantiate correctly particularly for relative tweens. Without this, a TweenLite.fromTo(obj, 1, {x:"+=100"}, {x:"-=100"}), for example, would actually jump to +=200 because the startAt would run twice, doubling the relative change. this._startAt.kill(); } startVars = {}; for (p in v.startAt) { //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, 1, from, to).fromTo(e, 1, to, from); startVars[p] = v.startAt[p]; } startVars.overwrite = false; startVars.immediateRender = true; startVars.lazy = (immediate && v.lazy !== false); startVars.startAt = startVars.delay = null; //no nesting of startAt objects allowed (otherwise it could cause an infinite loop). this._startAt = TweenLite.to(this.target, 0, startVars); if (immediate) { if (this._time > 0) { this._startAt = null; //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in TimelineLite/Max instances where immediateRender was false (which is the default in the convenience methods like from()). } else if (dur !== 0) { return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a TimelineLite or TimelineMax, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting. } } } else if (v.runBackwards && dur !== 0) { //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards) if (this._startAt) { this._startAt.render(-1, true); this._startAt.kill(); this._startAt = null; } else { if (this._time !== 0) { //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0 immediate = false; } pt = {}; for (p in v) { //copy props into a new object and skip any reserved props, otherwise onComplete or onUpdate or onStart could fire. We should, however, permit autoCSS to go through. if (!_reservedProps[p] || p === "autoCSS") { pt[p] = v[p]; } } pt.overwrite = 0; pt.data = "isFromStart"; //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in. pt.lazy = (immediate && v.lazy !== false); pt.immediateRender = immediate; //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after) this._startAt = TweenLite.to(this.target, 0, pt); if (!immediate) { this._startAt._init(); //ensures that the initial values are recorded this._startAt._enabled(false); //no need to have the tween render on the next cycle. Disable it because we'll always manually control the renders of the _startAt tween. if (this.vars.immediateRender) { this._startAt = null; } } else if (this._time === 0) { return; } } } this._ease = ease = (!ease) ? TweenLite.defaultEase : (ease instanceof Ease) ? ease : (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase; if (v.easeParams instanceof Array && ease.config) { this._ease = ease.config.apply(ease, v.easeParams); } this._easeType = this._ease._type; this._easePower = this._ease._power; this._firstPT = null; if (this._targets) { l = this._targets.length; for (i = 0; i < l; i++) { if ( this._initProps( this._targets[i], (this._propLookup[i] = {}), this._siblings[i], (op ? op[i] : null), i) ) { initPlugins = true; } } } else { initPlugins = this._initProps(this.target, this._propLookup, this._siblings, op, 0); } if (initPlugins) { TweenLite._onPluginEvent("_onInitAllProps", this); //reorders the array in order of priority. Uses a static TweenPlugin method in order to minimize file size in TweenLite } if (op) if (!this._firstPT) if (typeof(this.target) !== "function") { //if all tweening properties have been overwritten, kill the tween. If the target is a function, it's probably a delayedCall so let it live. this._enabled(false, false); } if (v.runBackwards) { pt = this._firstPT; while (pt) { pt.s += pt.c; pt.c = -pt.c; pt = pt._next; } } this._onUpdate = v.onUpdate; this._initted = true; }; p._initProps = function(target, propLookup, siblings, overwrittenProps, index) { var p, i, initPlugins, plugin, pt, v; if (target == null) { return false; } if (_lazyLookup[target._gsTweenID]) { _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end) } if (!this.vars.css) if (target.style) if (target !== window && target.nodeType) if (_plugins.css) if (this.vars.autoCSS !== false) { //it's so common to use TweenLite/Max to animate the css of DOM elements, we assume that if the target is a DOM element, that's what is intended (a convenience so that users don't have to wrap things in css:{}, although we still recommend it for a slight performance boost and better specificity). Note: we cannot check "nodeType" on the window inside an iframe. _autoCSS(this.vars, target); } for (p in this.vars) { v = this.vars[p]; if (_reservedProps[p]) { if (v) if ((v instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !== -1) { this.vars[p] = v = this._swapSelfInParams(v, this); } } else if (_plugins[p] && (plugin = new _plugins[p]())._onInitTween(target, this.vars[p], this, index)) { //t - target [object] //p - property [string] //s - start [number] //c - change [number] //f - isFunction [boolean] //n - name [string] //pg - isPlugin [boolean] //pr - priority [number] //m - mod [function | 0] this._firstPT = pt = {_next:this._firstPT, t:plugin, p:"setRatio", s:0, c:1, f:1, n:p, pg:1, pr:plugin._priority, m:0}; i = plugin._overwriteProps.length; while (--i > -1) { propLookup[plugin._overwriteProps[i]] = this._firstPT; } if (plugin._priority || plugin._onInitAllProps) { initPlugins = true; } if (plugin._onDisable || plugin._onEnable) { this._notifyPluginsOfEnabled = true; } if (pt._next) { pt._next._prev = pt; } } else { propLookup[p] = _addPropTween.call(this, target, p, "get", v, p, 0, null, this.vars.stringFilter, index); } } if (overwrittenProps) if (this._kill(overwrittenProps, target)) { //another tween may have tried to overwrite properties of this tween before init() was called (like if two tweens start at the same time, the one created second will run first) return this._initProps(target, propLookup, siblings, overwrittenProps, index); } if (this._overwrite > 1) if (this._firstPT) if (siblings.length > 1) if (_applyOverwrite(target, this, propLookup, this._overwrite, siblings)) { this._kill(propLookup, target); return this._initProps(target, propLookup, siblings, overwrittenProps, index); } if (this._firstPT) if ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration)) { //zero duration tweens don't lazy render by default; everything else does. _lazyLookup[target._gsTweenID] = true; } return initPlugins; }; p.render = function(time, suppressEvents, force) { var prevTime = this._time, duration = this._duration, prevRawPrevTime = this._rawPrevTime, isComplete, callback, pt, rawPrevTime; if (time >= duration - 0.0000001 && time >= 0) { //to work around occasional floating point math artifacts. this._totalTime = this._time = duration; this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1; if (!this._reversed ) { isComplete = true; callback = "onComplete"; force = (force || this._timeline.autoRemoveChildren); //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline. } if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate. time = 0; } if (prevRawPrevTime < 0 || (time <= 0 && time >= -0.0000001) || (prevRawPrevTime === _tinyNum && this.data !== "isPause")) if (prevRawPrevTime !== time) { //note: when this.data is "isPause", it's a callback added by addPause() on a timeline that we should not be triggered when LEAVING its exact start time. In other words, tl.addPause(1).play(1) shouldn't pause. force = true; if (prevRawPrevTime > _tinyNum) { callback = "onReverseComplete"; } } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0. this._totalTime = this._time = 0; this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0; if (prevTime !== 0 || (duration === 0 && prevRawPrevTime > 0)) { callback = "onReverseComplete"; isComplete = this._reversed; } if (time < 0) { this._active = false; if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered. if (prevRawPrevTime >= 0 && !(prevRawPrevTime === _tinyNum && this.data === "isPause")) { force = true; } this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient. } } if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately. force = true; } } else { this._totalTime = this._time = time; if (this._easeType) { var r = time / duration, type = this._easeType, pow = this._easePower; if (type === 1 || (type === 3 && r >= 0.5)) { r = 1 - r; } if (type === 3) { r *= 2; } if (pow === 1) { r *= r; } else if (pow === 2) { r *= r * r; } else if (pow === 3) { r *= r * r * r; } else if (pow === 4) { r *= r * r * r * r; } if (type === 1) { this.ratio = 1 - r; } else if (type === 2) { this.ratio = r; } else if (time / duration < 0.5) { this.ratio = r / 2; } else { this.ratio = 1 - (r / 2); } } else { this.ratio = this._ease.getRatio(time / duration); } } if (this._time === prevTime && !force) { return; } else if (!this._initted) { this._init(); if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example. return; } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) { this._time = this._totalTime = prevTime; this._rawPrevTime = prevRawPrevTime; _lazyTweens.push(this); this._lazy = [time, suppressEvents]; return; } //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently. if (this._time && !isComplete) { this.ratio = this._ease.getRatio(this._time / duration); } else if (isComplete && this._ease._calcEnd) { this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1); } } if (this._lazy !== false) { //in case a lazy render is pending, we should flush it because the new render is occurring now (imagine a lazy tween instantiating and then immediately the user calls tween.seek(tween.duration()), skipping to the end - the end render would be forced, and then if we didn't flush the lazy render, it'd fire AFTER the seek(), rendering it at the wrong time. this._lazy = false; } if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) { this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done. } if (prevTime === 0) { if (this._startAt) { if (time >= 0) { this._startAt.render(time, suppressEvents, force); } else if (!callback) { callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area. } } if (this.vars.onStart) if (this._time !== 0 || duration === 0) if (!suppressEvents) { this._callback("onStart"); } } pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](pt.c * this.ratio + pt.s); } else { pt.t[pt.p] = pt.c * this.ratio + pt.s; } pt = pt._next; } if (this._onUpdate) { if (time < 0) if (this._startAt && time !== -0.0001) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values. this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete. } if (!suppressEvents) if (this._time !== prevTime || isComplete || force) { this._callback("onUpdate"); } } if (callback) if (!this._gc || force) { //check _gc because there's a chance that kill() could be called in an onUpdate if (time < 0 && this._startAt && !this._onUpdate && time !== -0.0001) { //-0.0001 is a special value that we use when looping back to the beginning of a repeated TimelineMax, in which case we shouldn't render the _startAt values. this._startAt.render(time, suppressEvents, force); } if (isComplete) { if (this._timeline.autoRemoveChildren) { this._enabled(false, false); } this._active = false; } if (!suppressEvents && this.vars[callback]) { this._callback(callback); } if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless. this._rawPrevTime = 0; } } }; p._kill = function(vars, target, overwritingTween) { if (vars === "all") { vars = null; } if (vars == null) if (target == null || target === this.target) { this._lazy = false; return this._enabled(false, false); } target = (typeof(target) !== "string") ? (target || this._targets || this.target) : TweenLite.selector(target) || target; var simultaneousOverwrite = (overwritingTween && this._time && overwritingTween._startTime === this._startTime && this._timeline === overwritingTween._timeline), i, overwrittenProps, p, pt, propLookup, changed, killProps, record, killed; if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") { i = target.length; while (--i > -1) { if (this._kill(vars, target[i], overwritingTween)) { changed = true; } } } else { if (this._targets) { i = this._targets.length; while (--i > -1) { if (target === this._targets[i]) { propLookup = this._propLookup[i] || {}; this._overwrittenProps = this._overwrittenProps || []; overwrittenProps = this._overwrittenProps[i] = vars ? this._overwrittenProps[i] || {} : "all"; break; } } } else if (target !== this.target) { return false; } else { propLookup = this._propLookup; overwrittenProps = this._overwrittenProps = vars ? this._overwrittenProps || {} : "all"; } if (propLookup) { killProps = vars || propLookup; record = (vars !== overwrittenProps && overwrittenProps !== "all" && vars !== propLookup && (typeof(vars) !== "object" || !vars._tempKill)); //_tempKill is a super-secret way to delete a particular tweening property but NOT have it remembered as an official overwritten property (like in BezierPlugin) if (overwritingTween && (TweenLite.onOverwrite || this.vars.onOverwrite)) { for (p in killProps) { if (propLookup[p]) { if (!killed) { killed = []; } killed.push(p); } } if ((killed || !vars) && !_onOverwrite(this, overwritingTween, target, killed)) { //if the onOverwrite returned false, that means the user wants to override the overwriting (cancel it). return false; } } for (p in killProps) { if ((pt = propLookup[p])) { if (simultaneousOverwrite) { //if another tween overwrites this one and they both start at exactly the same time, yet this tween has already rendered once (for example, at 0.001) because it's first in the queue, we should revert the values to where they were at 0 so that the starting values aren't contaminated on the overwriting tween. if (pt.f) { pt.t[pt.p](pt.s); } else { pt.t[pt.p] = pt.s; } changed = true; } if (pt.pg && pt.t._kill(killProps)) { changed = true; //some plugins need to be notified so they can perform cleanup tasks first } if (!pt.pg || pt.t._overwriteProps.length === 0) { if (pt._prev) { pt._prev._next = pt._next; } else if (pt === this._firstPT) { this._firstPT = pt._next; } if (pt._next) { pt._next._prev = pt._prev; } pt._next = pt._prev = null; } delete propLookup[p]; } if (record) { overwrittenProps[p] = 1; } } if (!this._firstPT && this._initted) { //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening. this._enabled(false, false); } } } return changed; }; p.invalidate = function() { if (this._notifyPluginsOfEnabled) { TweenLite._onPluginEvent("_onDisable", this); } this._firstPT = this._overwrittenProps = this._startAt = this._onUpdate = null; this._notifyPluginsOfEnabled = this._active = this._lazy = false; this._propLookup = (this._targets) ? {} : []; Animation.prototype.invalidate.call(this); if (this.vars.immediateRender) { this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render) this.render(Math.min(0, -this._delay)); //in case delay is negative. } return this; }; p._enabled = function(enabled, ignoreTimeline) { if (!_tickerActive) { _ticker.wake(); } if (enabled && this._gc) { var targets = this._targets, i; if (targets) { i = targets.length; while (--i > -1) { this._siblings[i] = _register(targets[i], this, true); } } else { this._siblings = _register(this.target, this, true); } } Animation.prototype._enabled.call(this, enabled, ignoreTimeline); if (this._notifyPluginsOfEnabled) if (this._firstPT) { return TweenLite._onPluginEvent((enabled ? "_onEnable" : "_onDisable"), this); } return false; }; //----TweenLite static methods ----------------------------------------------------- TweenLite.to = function(target, duration, vars) { return new TweenLite(target, duration, vars); }; TweenLite.from = function(target, duration, vars) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return new TweenLite(target, duration, vars); }; TweenLite.fromTo = function(target, duration, fromVars, toVars) { toVars.startAt = fromVars; toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false); return new TweenLite(target, duration, toVars); }; TweenLite.delayedCall = function(delay, callback, params, scope, useFrames) { return new TweenLite(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, callbackScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, immediateRender:false, lazy:false, useFrames:useFrames, overwrite:0}); }; TweenLite.set = function(target, vars) { return new TweenLite(target, 0, vars); }; TweenLite.getTweensOf = function(target, onlyActive) { if (target == null) { return []; } target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target; var i, a, j, t; if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") { i = target.length; a = []; while (--i > -1) { a = a.concat(TweenLite.getTweensOf(target[i], onlyActive)); } i = a.length; //now get rid of any duplicates (tweens of arrays of objects could cause duplicates) while (--i > -1) { t = a[i]; j = i; while (--j > -1) { if (t === a[j]) { a.splice(i, 1); } } } } else { a = _register(target).concat(); i = a.length; while (--i > -1) { if (a[i]._gc || (onlyActive && !a[i].isActive())) { a.splice(i, 1); } } } return a; }; TweenLite.killTweensOf = TweenLite.killDelayedCallsTo = function(target, onlyActive, vars) { if (typeof(onlyActive) === "object") { vars = onlyActive; //for backwards compatibility (before "onlyActive" parameter was inserted) onlyActive = false; } var a = TweenLite.getTweensOf(target, onlyActive), i = a.length; while (--i > -1) { a[i]._kill(vars, target); } }; /* * ---------------------------------------------------------------- * TweenPlugin (could easily be split out as a separate file/class, but included for ease of use (so that people don't need to include another script call before loading plugins which is easy to forget) * ---------------------------------------------------------------- */ var TweenPlugin = _class("plugins.TweenPlugin", function(props, priority) { this._overwriteProps = (props || "").split(","); this._propName = this._overwriteProps[0]; this._priority = priority || 0; this._super = TweenPlugin.prototype; }, true); p = TweenPlugin.prototype; TweenPlugin.version = "1.19.0"; TweenPlugin.API = 2; p._firstPT = null; p._addTween = _addPropTween; p.setRatio = _setRatio; p._kill = function(lookup) { var a = this._overwriteProps, pt = this._firstPT, i; if (lookup[this._propName] != null) { this._overwriteProps = []; } else { i = a.length; while (--i > -1) { if (lookup[a[i]] != null) { a.splice(i, 1); } } } while (pt) { if (lookup[pt.n] != null) { if (pt._next) { pt._next._prev = pt._prev; } if (pt._prev) { pt._prev._next = pt._next; pt._prev = null; } else if (this._firstPT === pt) { this._firstPT = pt._next; } } pt = pt._next; } return false; }; p._mod = p._roundProps = function(lookup) { var pt = this._firstPT, val; while (pt) { val = lookup[this._propName] || (pt.n != null && lookup[ pt.n.split(this._propName + "_").join("") ]); if (val && typeof(val) === "function") { //some properties that are very plugin-specific add a prefix named after the _propName plus an underscore, so we need to ignore that extra stuff here. if (pt.f === 2) { pt.t._applyPT.m = val; } else { pt.m = val; } } pt = pt._next; } }; TweenLite._onPluginEvent = function(type, tween) { var pt = tween._firstPT, changed, pt2, first, last, next; if (type === "_onInitAllProps") { //sorts the PropTween linked list in order of priority because some plugins need to render earlier/later than others, like MotionBlurPlugin applies its effects after all x/y/alpha tweens have rendered on each frame. while (pt) { next = pt._next; pt2 = first; while (pt2 && pt2.pr > pt.pr) { pt2 = pt2._next; } if ((pt._prev = pt2 ? pt2._prev : last)) { pt._prev._next = pt; } else { first = pt; } if ((pt._next = pt2)) { pt2._prev = pt; } else { last = pt; } pt = next; } pt = tween._firstPT = first; } while (pt) { if (pt.pg) if (typeof(pt.t[type]) === "function") if (pt.t[type]()) { changed = true; } pt = pt._next; } return changed; }; TweenPlugin.activate = function(plugins) { var i = plugins.length; while (--i > -1) { if (plugins[i].API === TweenPlugin.API) { _plugins[(new plugins[i]())._propName] = plugins[i]; } } return true; }; //provides a more concise way to define plugins that have no dependencies besides TweenPlugin and TweenLite, wrapping common boilerplate stuff into one function (added in 1.9.0). You don't NEED to use this to define a plugin - the old way still works and can be useful in certain (rare) situations. _gsDefine.plugin = function(config) { if (!config || !config.propName || !config.init || !config.API) { throw "illegal plugin definition."; } var propName = config.propName, priority = config.priority || 0, overwriteProps = config.overwriteProps, map = {init:"_onInitTween", set:"setRatio", kill:"_kill", round:"_mod", mod:"_mod", initAll:"_onInitAllProps"}, Plugin = _class("plugins." + propName.charAt(0).toUpperCase() + propName.substr(1) + "Plugin", function() { TweenPlugin.call(this, propName, priority); this._overwriteProps = overwriteProps || []; }, (config.global === true)), p = Plugin.prototype = new TweenPlugin(propName), prop; p.constructor = Plugin; Plugin.API = config.API; for (prop in map) { if (typeof(config[prop]) === "function") { p[map[prop]] = config[prop]; } } Plugin.version = config.version; TweenPlugin.activate([Plugin]); return Plugin; }; //now run through all the dependencies discovered and if any are missing, log that to the console as a warning. This is why it's best to have TweenLite load last - it can check all the dependencies for you. a = window._gsQueue; if (a) { for (i = 0; i < a.length; i++) { a[i](); } for (p in _defLookup) { if (!_defLookup[p].func) { window.console.log("GSAP encountered missing dependency: " + p); } } } _tickerActive = false; //ensures that the first official animation forces a ticker.tick() to update the time when it is instantiated })((typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window, "TweenMax"); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | 2 | /*! * VERSION: 0.1.12 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com/jquery-gsap-plugin/ * * Requires TweenLite version 1.8.0 or higher and CSSPlugin. * * @license Copyright (c) 2013-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ (function($) { "use strict"; var _animate = $.fn.animate, _stop = $.fn.stop, _enabled = true, TweenLite, CSSPlugin, _warned, _copy = function(o) { var copy = {}, p; for (p in o) { copy[p] = o[p]; } return copy; }, _reserved = {overwrite:1, delay:1, useFrames:1, runBackwards:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, autoCSS:1}, _defaultLegacyProps = ",scrollTop,scrollLeft,show,hide,toggle,", _legacyProps = _defaultLegacyProps, _copyCriticalReserved = function(main, sub) { for (var p in _reserved) { if (_reserved[p] && main[p] !== undefined) { sub[p] = main[p]; } } }, _createEase = function(ease) { return function(p) { return ease.getRatio(p); }; }, _easeMap = {}, _init = function() { var globals = window.GreenSockGlobals || window, version, stale, p; TweenLite = globals.TweenMax || globals.TweenLite; //we prioritize TweenMax if it's loaded so that we can accommodate special features like repeat, yoyo, repeatDelay, etc. if (TweenLite) { version = (TweenLite.version + ".0.0").split("."); //in case an old version of TweenLite is used that had a numeric version like 1.68 instead of a string like "1.6.8" stale = !(Number(version[0]) > 0 && Number(version[1]) > 7); globals = globals.com.greensock; CSSPlugin = globals.plugins.CSSPlugin; _easeMap = globals.easing.Ease.map || {}; //don't do just window.Ease or window.CSSPlugin because some other libraries like EaselJS/TweenJS use those same names and there could be a collision. } if (!TweenLite || !CSSPlugin || stale) { TweenLite = null; if (!_warned && window.console) { window.console.log("The jquery.gsap.js plugin requires the TweenMax (or at least TweenLite and CSSPlugin) JavaScript file(s)." + (stale ? " Version " + version.join(".") + " is too old." : "")); _warned = true; } return; } if ($.easing) { for (p in _easeMap) { $.easing[p] = _createEase(_easeMap[p]); } _init = false; } }; $.fn.animate = function(prop, speed, easing, callback) { prop = prop || {}; if (_init) { _init(); if (!TweenLite || !CSSPlugin) { return _animate.call(this, prop, speed, easing, callback); } } if (!_enabled || prop.skipGSAP === true || (typeof(speed) === "object" && typeof(speed.step) === "function")) { //we don't support the "step" feature because it's too costly performance-wise, so fall back to the native animate() call if we sense one. Same with scrollTop and scrollLeft which are handled in a special way in jQuery. return _animate.call(this, prop, speed, easing, callback); } var config = $.speed(speed, easing, callback), vars = {ease:(_easeMap[config.easing] || ((config.easing === false) ? _easeMap.linear : _easeMap.swing))}, obj = this, specEasing = (typeof(speed) === "object") ? speed.specialEasing : null, val, p, doAnimation, specEasingVars; for (p in prop) { val = prop[p]; if (val instanceof Array && _easeMap[val[1]]) { specEasing = specEasing || {}; specEasing[p] = val[1]; val = val[0]; } if (val === "show" || val === "hide" || val === "toggle" || (_legacyProps.indexOf(p) !== -1 && _legacyProps.indexOf("," + p + ",") !== -1)) { //note: slideUp() and slideDown() pass in opacity:"show" or opacity:"hide" return _animate.call(this, prop, speed, easing, callback); } else { vars[(p.indexOf("-") === -1) ? p : $.camelCase(p)] = val; } } if (specEasing) { vars = _copy(vars); specEasingVars = []; for (p in specEasing) { val = specEasingVars[specEasingVars.length] = {}; _copyCriticalReserved(vars, val); val.ease = (_easeMap[specEasing[p]] || vars.ease); if (p.indexOf("-") !== -1) { p = $.camelCase(p); } val[p] = vars[p]; delete vars[p]; } if (specEasingVars.length === 0) { specEasingVars = null; } } doAnimation = function(next) { var varsCopy = _copy(vars), i; if (specEasingVars) { i = specEasingVars.length; while (--i > -1) { TweenLite.to(this, $.fx.off ? 0 : config.duration / 1000, specEasingVars[i]); } } varsCopy.onComplete = function() { if (next) { next(); } else if (config.old) { $(this).each(config.old); } }; TweenLite.to(this, $.fx.off ? 0 : config.duration / 1000, varsCopy); }; if (config.queue !== false) { obj.queue(config.queue, doAnimation); //note: the queued function will get called once for each element in the jQuery collection. if (typeof(config.old) === "function") { $(obj[obj.length-1]).queue(config.queue, function(next) { config.old.call(obj); next(); }); } } else { doAnimation.call(obj); } return obj; }; $.fn.stop = function(clearQueue, gotoEnd) { _stop.call(this, clearQueue, gotoEnd); if (TweenLite) { if (gotoEnd) { var tweens = TweenLite.getTweensOf(this), i = tweens.length, progress; while (--i > -1) { progress = tweens[i].totalTime() / tweens[i].totalDuration(); if (progress > 0 && progress < 1) { tweens[i].seek(tweens[i].totalDuration()); } } } TweenLite.killTweensOf(this); } return this; }; $.gsap = { enabled:function(value) { _enabled = value; }, version:"0.1.12", legacyProps:function(value) { _legacyProps = _defaultLegacyProps + value + ","; } }; }(jQuery)); |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| EasePack.js | 53.76% | (100 / 186) | 35.56% | (48 / 135) | 36.36% | (16 / 44) | 53.51% | (99 / 185) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 | 1 1 1 1 12 12 12 12 6 6 6 44 44 44 42 42 42 42 3 3 3 3 3 3 3 2 2 1 1 2 2 2 2 2 1 1 1 1 1 2 2 2 1 1 1 1 1 2 2 2 40 40 40 40 40 40 40 40 2 139 2 2 2 40 40 2 1 1 1 1 1 1 1 1 3 3 3 3 3 3 3 3 3 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 1.15.5 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("easing.Back", ["easing.Ease"], function(Ease) { var w = (_gsScope.GreenSockGlobals || _gsScope), gs = w.com.greensock, _2PI = Math.PI * 2, _HALF_PI = Math.PI / 2, _class = gs._class, _create = function(n, f) { var C = _class("easing." + n, function(){}, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; return C; }, _easeReg = Ease.register || function(){}, //put an empty function in place just as a safety measure in case someone loads an OLD version of TweenLite.js where Ease.register doesn't exist. _wrap = function(name, EaseOut, EaseIn, EaseInOut, aliases) { var C = _class("easing."+name, { easeOut:new EaseOut(), easeIn:new EaseIn(), easeInOut:new EaseInOut() }, true); _easeReg(C, name); return C; }, EasePoint = function(time, value, next) { this.t = time; this.v = value; if (next) { this.next = next; next.prev = this; this.c = next.v - value; this.gap = next.t - time; } }, //Back _createBack = function(n, f) { var C = _class("easing." + n, function(overshoot) { this._p1 = (overshoot || overshoot === 0) ? overshoot : 1.70158; this._p2 = this._p1 * 1.525; }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(overshoot) { return new C(overshoot); }; return C; }, Back = _wrap("Back", _createBack("BackOut", function(p) { return ((p = p - 1) * p * ((this._p1 + 1) * p + this._p1) + 1); }), _createBack("BackIn", function(p) { return p * p * ((this._p1 + 1) * p - this._p1); }), _createBack("BackInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * p * p * ((this._p2 + 1) * p - this._p2) : 0.5 * ((p -= 2) * p * ((this._p2 + 1) * p + this._p2) + 2); }) ), //SlowMo SlowMo = _class("easing.SlowMo", function(linearRatio, power, yoyoMode) { power = (power || power === 0) ? power : 0.7; if (linearRatio == null) { linearRatio = 0.7; } else Iif (linearRatio > 1) { linearRatio = 1; } this._p = (linearRatio !== 1) ? power : 0; this._p1 = (1 - linearRatio) / 2; this._p2 = linearRatio; this._p3 = this._p1 + this._p2; this._calcEnd = (yoyoMode === true); }, true), p = SlowMo.prototype = new Ease(), SteppedEase, RoughEase, _createElastic; p.constructor = SlowMo; p.getRatio = function(p) { var r = p + (0.5 - p) * this._p; if (p < this._p1) { return this._calcEnd ? 1 - ((p = 1 - (p / this._p1)) * p) : r - ((p = 1 - (p / this._p1)) * p * p * p * r); } else if (p > this._p3) { return this._calcEnd ? 1 - (p = (p - this._p3) / this._p1) * p : r + ((p - r) * (p = (p - this._p3) / this._p1) * p * p * p); } return this._calcEnd ? 1 : r; }; SlowMo.ease = new SlowMo(0.7, 0.7); p.config = SlowMo.config = function(linearRatio, power, yoyoMode) { return new SlowMo(linearRatio, power, yoyoMode); }; //SteppedEase SteppedEase = _class("easing.SteppedEase", function(steps) { steps = steps || 1; this._p1 = 1 / steps; this._p2 = steps + 1; }, true); p = SteppedEase.prototype = new Ease(); p.constructor = SteppedEase; p.getRatio = function(p) { if (p < 0) { p = 0; } else if (p >= 1) { p = 0.999999999; } return ((this._p2 * p) >> 0) * this._p1; }; p.config = SteppedEase.config = function(steps) { return new SteppedEase(steps); }; //RoughEase RoughEase = _class("easing.RoughEase", function(vars) { vars = vars || {}; var taper = vars.taper || "none", a = [], cnt = 0, points = (vars.points || 20) | 0, i = points, randomize = (vars.randomize !== false), clamp = (vars.clamp === true), template = (vars.template instanceof Ease) ? vars.template : null, strength = (typeof(vars.strength) === "number") ? vars.strength * 0.4 : 0.4, x, y, bump, invX, obj, pnt; while (--i > -1) { x = randomize ? Math.random() : (1 / points) * i; y = template ? template.getRatio(x) : x; Eif (taper === "none") { bump = strength; } else if (taper === "out") { invX = 1 - x; bump = invX * invX * strength; } else if (taper === "in") { bump = x * x * strength; } else if (x < 0.5) { //"both" (start) invX = x * 2; bump = invX * invX * 0.5 * strength; } else { //"both" (end) invX = (1 - x) * 2; bump = invX * invX * 0.5 * strength; } Eif (randomize) { y += (Math.random() * bump) - (bump * 0.5); } else if (i % 2) { y += bump * 0.5; } else { y -= bump * 0.5; } Iif (clamp) { if (y > 1) { y = 1; } else if (y < 0) { y = 0; } } a[cnt++] = {x:x, y:y}; } a.sort(function(a, b) { return a.x - b.x; }); pnt = new EasePoint(1, 1, null); i = points; while (--i > -1) { obj = a[i]; pnt = new EasePoint(obj.x, obj.y, pnt); } this._prev = new EasePoint(0, 0, (pnt.t !== 0) ? pnt : pnt.next); }, true); p = RoughEase.prototype = new Ease(); p.constructor = RoughEase; p.getRatio = function(p) { var pnt = this._prev; if (p > pnt.t) { while (pnt.next && p >= pnt.t) { pnt = pnt.next; } pnt = pnt.prev; } else { while (pnt.prev && p <= pnt.t) { pnt = pnt.prev; } } this._prev = pnt; return (pnt.v + ((p - pnt.t) / pnt.gap) * pnt.c); }; p.config = function(vars) { return new RoughEase(vars); }; RoughEase.ease = new RoughEase(); //Bounce _wrap("Bounce", _create("BounceOut", function(p) { if (p < 1 / 2.75) { return 7.5625 * p * p; } else if (p < 2 / 2.75) { return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; }), _create("BounceIn", function(p) { if ((p = 1 - p) < 1 / 2.75) { return 1 - (7.5625 * p * p); } else if (p < 2 / 2.75) { return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75); } else if (p < 2.5 / 2.75) { return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375); } return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375); }), _create("BounceInOut", function(p) { var invert = (p < 0.5); if (invert) { p = 1 - (p * 2); } else { p = (p * 2) - 1; } if (p < 1 / 2.75) { p = 7.5625 * p * p; } else if (p < 2 / 2.75) { p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75; } else if (p < 2.5 / 2.75) { p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375; } else { p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375; } return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5; }) ); //CIRC _wrap("Circ", _create("CircOut", function(p) { return Math.sqrt(1 - (p = p - 1) * p); }), _create("CircIn", function(p) { return -(Math.sqrt(1 - (p * p)) - 1); }), _create("CircInOut", function(p) { return ((p*=2) < 1) ? -0.5 * (Math.sqrt(1 - p * p) - 1) : 0.5 * (Math.sqrt(1 - (p -= 2) * p) + 1); }) ); //Elastic _createElastic = function(n, f, def) { var C = _class("easing." + n, function(amplitude, period) { this._p1 = (amplitude >= 1) ? amplitude : 1; //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1. this._p2 = (period || def) / (amplitude < 1 ? amplitude : 1); this._p3 = this._p2 / _2PI * (Math.asin(1 / this._p1) || 0); this._p2 = _2PI / this._p2; //precalculate to optimize }, true), p = C.prototype = new Ease(); p.constructor = C; p.getRatio = f; p.config = function(amplitude, period) { return new C(amplitude, period); }; return C; }; _wrap("Elastic", _createElastic("ElasticOut", function(p) { return this._p1 * Math.pow(2, -10 * p) * Math.sin( (p - this._p3) * this._p2 ) + 1; }, 0.3), _createElastic("ElasticIn", function(p) { return -(this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2 )); }, 0.3), _createElastic("ElasticInOut", function(p) { return ((p *= 2) < 1) ? -0.5 * (this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * this._p2)) : this._p1 * Math.pow(2, -10 *(p -= 1)) * Math.sin( (p - this._p3) * this._p2 ) * 0.5 + 1; }, 0.45) ); //Expo _wrap("Expo", _create("ExpoOut", function(p) { return 1 - Math.pow(2, -10 * p); }), _create("ExpoIn", function(p) { return Math.pow(2, 10 * (p - 1)) - 0.001; }), _create("ExpoInOut", function(p) { return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); }) ); //Sine _wrap("Sine", _create("SineOut", function(p) { return Math.sin(p * _HALF_PI); }), _create("SineIn", function(p) { return -Math.cos(p * _HALF_PI) + 1; }), _create("SineInOut", function(p) { return -0.5 * (Math.cos(Math.PI * p) - 1); }) ); _class("easing.EaseLookup", { find:function(s) { return Ease.map[s]; } }, true); //register the non-standard eases _easeReg(w.SlowMo, "SlowMo", "ease,"); _easeReg(RoughEase, "RoughEase", "ease,"); _easeReg(SteppedEase, "SteppedEase", "ease,"); return Back; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function() { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope); }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }()); |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| AttrPlugin.js | 52.17% | (12 / 23) | 48% | (12 / 25) | 75% | (3 / 4) | 50% | (11 / 22) | |
| CSSRulePlugin.js | 44.44% | (24 / 54) | 30.77% | (12 / 39) | 62.5% | (5 / 8) | 43.4% | (23 / 53) | |
| ColorPropsPlugin.js | 16.28% | (21 / 129) | 11.93% | (13 / 109) | 30% | (3 / 10) | 15.63% | (20 / 128) | |
| DirectionalRotationPlugin.js | 24% | (12 / 50) | 18.46% | (12 / 65) | 60% | (3 / 5) | 22.45% | (11 / 49) | |
| EaselPlugin.js | 7.83% | (13 / 166) | 7.27% | (12 / 165) | 23.08% | (3 / 13) | 7.32% | (12 / 164) | |
| ModifiersPlugin.js | 16.3% | (15 / 92) | 16.13% | (15 / 93) | 33.33% | (3 / 9) | 15.56% | (14 / 90) | |
| ScrollToPlugin.js | 5.21% | (5 / 96) | 4.41% | (6 / 136) | 8.33% | (1 / 12) | 4.21% | (4 / 95) | |
| TEMPLATE_Plugin.js | 38.46% | (5 / 13) | 54.55% | (6 / 11) | 33.33% | (1 / 3) | 33.33% | (4 / 12) | |
| TextPlugin.js | 18.06% | (13 / 72) | 13.79% | (12 / 87) | 50% | (3 / 6) | 16.9% | (12 / 71) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.6.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine.plugin({ propName: "attr", API: 2, version: "0.6.0", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var p, end; if (typeof(target.setAttribute) !== "function") { return false; } for (p in value) { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } this._addTween(target, "setAttribute", target.getAttribute(p) + "", end + "", p, false, p); this._overwriteProps.push(p); } return true; } }); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("AttrPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.6.4 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("plugins.CSSRulePlugin", ["plugins.TweenPlugin","TweenLite","plugins.CSSPlugin"], function(TweenPlugin, TweenLite, CSSPlugin) { /** @constructor **/ var CSSRulePlugin = function() { TweenPlugin.call(this, "cssRule"); this._overwriteProps.length = 0; }, _doc = _gsScope.document, _superSetRatio = CSSPlugin.prototype.setRatio, p = CSSRulePlugin.prototype = new CSSPlugin(); p._propName = "cssRule"; p.constructor = CSSRulePlugin; CSSRulePlugin.version = "0.6.4"; CSSRulePlugin.API = 2; /** * Searches the style sheets in the document for a particular selector like ".myClass" or "a" or "a:hover" or ":after" and * returns a reference to that style sheet (or an array of them in the case of a pseudo selector like ":after"). Then you * can animate the individual properties of the style sheet. * * @param {!string} selector a string describing the selector, like ".myClass" or "a" or "a:hover" or ":after" * @return a reference to the style sheet (or an array of them in the case of a pseudo selector). If none was found, null is returned (or an empty array for a pseudo selector) */ CSSRulePlugin.getRule = function(selector) { var ruleProp = _doc.all ? 'rules' : 'cssRules', ss = _doc.styleSheets, i = ss.length, pseudo = (selector.charAt(0) === ":"), j, curSS, cs, a; selector = (pseudo ? "" : ",") + selector.toLowerCase() + ","; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase. if (pseudo) { a = []; } while (--i > -1) { //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. try { curSS = ss[i][ruleProp]; if (!curSS) { continue; } j = curSS.length; } catch (e) { console.log(e); continue; } while (--j > -1) { cs = curSS[j]; if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out. if (pseudo) { a.push(cs.style); } else { return cs.style; } } } } return a; }; // @private gets called when the tween renders for the first time. This kicks everything off, recording start/end values, etc. p._onInitTween = function(target, value, tween) { if (target.cssText === undefined) { return false; } var div = target._gsProxy = target._gsProxy || _doc.createElement("div"); this._ss = target; this._proxy = div.style; div.style.cssText = target.cssText; CSSPlugin.prototype._onInitTween.call(this, div, value, tween); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the setRatio() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both return true; }; // @private gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1. p.setRatio = function(v) { _superSetRatio.call(this, v); this._ss.cssText = this._proxy.cssText; }; TweenPlugin.activate([CSSRulePlugin]); return CSSRulePlugin; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("CSSRulePlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 | 1 1 1 1 20 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: beta 1.5.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _numExp = /(\d|\.)+/g, _relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g, _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, _hue = function(h, m1, m2) { h = (h < 0) ? h + 1 : (h > 1) ? h - 1 : h; return ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : (h < 0.5) ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * 255) + 0.5) | 0; }, /** * @private Parses a color (like #9F0, #FF9900, rgb(255,51,153) or hsl(108, 50%, 10%)) into an array with 3 elements for red, green, and blue or if toHSL parameter is true, it will populate the array with hue, saturation, and lightness values. If a relative value is found in an hsl() or hsla() string, it will preserve those relative prefixes and all the values in the array will be strings instead of numbers (in all other cases it will be populated with numbers). * @param {(string|number)} v The value the should be parsed which could be a string like #9F0 or rgb(255,102,51) or rgba(255,0,0,0.5) or it could be a number like 0xFF00CC or even a named color like red, blue, purple, etc. * @param {(boolean)} toHSL If true, an hsl() or hsla() value will be returned instead of rgb() or rgba() * @return {Array.<number>} An array containing red, green, and blue (and optionally alpha) in that order, or if the toHSL parameter was true, the array will contain hue, saturation and lightness (and optionally alpha) in that order. Always numbers unless there's a relative prefix found in an hsl() or hsla() string and toHSL is true. */ _parseColor = function(v, toHSL) { var a, r, g, b, h, s, l, max, min, d, wasHSL; if (!v) { a = _colorLookup.black; } else if (typeof(v) === "number") { a = [v >> 16, (v >> 8) & 255, v & 255]; } else { if (v.charAt(v.length - 1) === ",") { //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value. v = v.substr(0, v.length - 1); } if (_colorLookup[v]) { a = _colorLookup[v]; } else if (v.charAt(0) === "#") { if (v.length === 4) { //for shorthand like #9F0 r = v.charAt(1); g = v.charAt(2); b = v.charAt(3); v = "#" + r + r + g + g + b + b; } v = parseInt(v.substr(1), 16); a = [v >> 16, (v >> 8) & 255, v & 255]; } else if (v.substr(0, 3) === "hsl") { a = wasHSL = v.match(_numExp); if (!toHSL) { h = (Number(a[0]) % 360) / 360; s = Number(a[1]) / 100; l = Number(a[2]) / 100; g = (l <= 0.5) ? l * (s + 1) : l + s - l * s; r = l * 2 - g; if (a.length > 3) { a[3] = Number(v[3]); } a[0] = _hue(h + 1 / 3, r, g); a[1] = _hue(h, r, g); a[2] = _hue(h - 1 / 3, r, g); } else if (v.indexOf("=") !== -1) { //if relative values are found, just return the raw strings with the relative prefixes in place. return v.match(_relNumExp); } } else { a = v.match(_numExp) || _colorLookup.transparent; } a[0] = Number(a[0]); a[1] = Number(a[1]); a[2] = Number(a[2]); if (a.length > 3) { a[3] = Number(a[3]); } } if (toHSL && !wasHSL) { r = a[0] / 255; g = a[1] / 255; b = a[2] / 255; max = Math.max(r, g, b); min = Math.min(r, g, b); l = (max + min) / 2; if (max === min) { h = s = 0; } else { d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); h = (max === r) ? (g - b) / d + (g < b ? 6 : 0) : (max === g) ? (b - r) / d + 2 : (r - g) / d + 4; h *= 60; } a[0] = (h + 0.5) | 0; a[1] = (s * 100 + 0.5) | 0; a[2] = (l * 100 + 0.5) | 0; } return a; }, _formatColors = function(s, toHSL) { var colors = (s + "").match(_colorExp) || [], charIndex = 0, parsed = colors.length ? "" : s, i, color, temp; for (i = 0; i < colors.length; i++) { color = colors[i]; temp = s.substr(charIndex, s.indexOf(color, charIndex)-charIndex); charIndex += temp.length + color.length; color = _parseColor(color, toHSL); if (color.length === 3) { color.push(1); } parsed += temp + (toHSL ? "hsla(" + color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : "rgba(" + color.join(",")) + ")"; } return parsed + s.substr(charIndex); }, p, _colorStringFilter, TweenLite = _gsScope.TweenLite, _colorExp = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b", //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc. ColorPropsPlugin = _gsScope._gsDefine.plugin({ propName: "colorProps", version: "1.5.0", priority: -1, API: 2, global: true, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var p, proxy, pt, val; this._target = target; this._proxy = proxy = ((value.format + "").toUpperCase() === "NUMBER") ? {} : 0; for (p in value) { if (p !== "format") { if (proxy) { this._firstNumPT = pt = {_next:this._firstNumPT, t:target, p:p, f:(typeof(target[p]) === "function")}; proxy[p] = "rgb(" + _parseColor(!pt.f ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]()).join(",") + ")"; val = value[p]; if (typeof(val) === "function") { val = val(index, target); } this._addTween(proxy, p, "get", ((typeof(val) === "number") ? "rgb(" + _parseColor(val, false).join(",") + ")" : val), p, null, null, _colorStringFilter); } else { this._addTween(target, p, "get", value[p], p, null, null, _colorStringFilter, index); } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var pt = this._firstNumPT, val; this._super.setRatio.call(this, v); while (pt) { val = _parseColor(this._proxy[pt.p], false); val = val[0] << 16 | val[1] << 8 | val[2]; if (pt.f) { this._target[pt.p](val); } else { this._target[pt.p] = val; } pt = pt._next; } } }); for (p in _colorLookup) { _colorExp += "|" + p + "\\b"; } _colorExp = new RegExp(_colorExp+")", "gi"); ColorPropsPlugin.colorStringFilter = _colorStringFilter = function(a) { var combined = a[0] + a[1], toHSL; _colorExp.lastIndex = 0; if (_colorExp.test(combined)) { toHSL = (combined.indexOf("hsl(") !== -1 || combined.indexOf("hsla(") !== -1); a[0] = _formatColors(a[0], toHSL); a[1] = _formatColors(a[1], toHSL); } }; Iif (!TweenLite.defaultStringFilter) { TweenLite.defaultStringFilter = ColorPropsPlugin.colorStringFilter; } ColorPropsPlugin.parseColor = _parseColor; p = ColorPropsPlugin.prototype; p._firstNumPT = null; p._kill = function(lookup) { var pt = this._firstNumPT, prev; while (pt) { if (pt.p in lookup) { if (pt === p._firstNumPT) { this._firstNumPT = pt._next; } if (prev) { prev._next = pt._next; } } else { prev = pt; } pt = pt._next; } return this._super._kill(lookup); }; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("ColorPropsPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.3.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine.plugin({ propName: "directionalRotation", version: "0.3.0", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { if (typeof(value) !== "object") { value = {rotation:value}; } this.finals = {}; var cap = (value.useRadians === true) ? Math.PI * 2 : 360, min = 0.000001, p, v, start, end, dif, split; for (p in value) { if (p !== "useRadians") { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } split = (end + "").split("_"); v = split[0]; start = parseFloat( (typeof(target[p]) !== "function") ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]() ); end = this.finals[p] = (typeof(v) === "string" && v.charAt(1) === "=") ? start + parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : Number(v) || 0; dif = end - start; if (split.length) { v = split.join("_"); if (v.indexOf("short") !== -1) { dif = dif % cap; if (dif !== dif % (cap / 2)) { dif = (dif < 0) ? dif + cap : dif - cap; } } if (v.indexOf("_cw") !== -1 && dif < 0) { dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } else if (v.indexOf("ccw") !== -1 && dif > 0) { dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap; } } if (dif > min || dif < -min) { this._addTween(target, p, start, start + dif, p); this._overwriteProps.push(p); } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(ratio) { var pt; if (ratio !== 1) { this._super.setRatio.call(this, ratio); } else { pt = this._firstPT; while (pt) { if (pt.f) { pt.t[pt.p](this.finals[pt.p]); } else { pt.t[pt.p] = this.finals[pt.p]; } pt = pt._next; } } } })._autoCSS = true; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("DirectionalRotationPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 | 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.2.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _numExp = /(\d|\.)+/g, _ColorFilter, _ColorMatrixFilter, _colorProps = ["redMultiplier","greenMultiplier","blueMultiplier","alphaMultiplier","redOffset","greenOffset","blueOffset","alphaOffset"], _colorLookup = {aqua:[0,255,255], lime:[0,255,0], silver:[192,192,192], black:[0,0,0], maroon:[128,0,0], teal:[0,128,128], blue:[0,0,255], navy:[0,0,128], white:[255,255,255], fuchsia:[255,0,255], olive:[128,128,0], yellow:[255,255,0], orange:[255,165,0], gray:[128,128,128], purple:[128,0,128], green:[0,128,0], red:[255,0,0], pink:[255,192,203], cyan:[0,255,255], transparent:[255,255,255,0]}, _parseColor = function(color) { if (color === "" || color == null || color === "none") { return _colorLookup.transparent; } else if (_colorLookup[color]) { return _colorLookup[color]; } else if (typeof(color) === "number") { return [color >> 16, (color >> 8) & 255, color & 255]; } else if (color.charAt(0) === "#") { if (color.length === 4) { //for shorthand like #9F0 color = "#" + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2) + color.charAt(3) + color.charAt(3); } color = parseInt(color.substr(1), 16); return [color >> 16, (color >> 8) & 255, color & 255]; } return color.match(_numExp) || _colorLookup.transparent; }, _parseColorFilter = function(t, v, pg) { if (!_ColorFilter) { _ColorFilter = (_gsScope.ColorFilter || _gsScope.createjs.ColorFilter); if (!_ColorFilter) { throw("EaselPlugin error: The EaselJS ColorFilter JavaScript file wasn't loaded."); } } var filters = t.filters || [], i = filters.length, c, s, e, a, p; while (--i > -1) { if (filters[i] instanceof _ColorFilter) { s = filters[i]; break; } } if (!s) { s = new _ColorFilter(); filters.push(s); t.filters = filters; } e = s.clone(); if (v.tint != null) { c = _parseColor(v.tint); a = (v.tintAmount != null) ? Number(v.tintAmount) : 1; e.redOffset = Number(c[0]) * a; e.greenOffset = Number(c[1]) * a; e.blueOffset = Number(c[2]) * a; e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1 - a; } else { for (p in v) { if (p !== "exposure") if (p !== "brightness") { e[p] = Number(v[p]); } } } if (v.exposure != null) { e.redOffset = e.greenOffset = e.blueOffset = 255 * (Number(v.exposure) - 1); e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1; } else if (v.brightness != null) { a = Number(v.brightness) - 1; e.redOffset = e.greenOffset = e.blueOffset = (a > 0) ? a * 255 : 0; e.redMultiplier = e.greenMultiplier = e.blueMultiplier = 1 - Math.abs(a); } i = 8; while (--i > -1) { p = _colorProps[i]; if (s[p] !== e[p]) { pg._addTween(s, p, s[p], e[p], "easel_colorFilter"); } } pg._overwriteProps.push("easel_colorFilter"); if (!t.cacheID) { throw("EaselPlugin warning: for filters to display in EaselJS, you must call the object's cache() method first. " + t); } }, _idMatrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0], _lumR = 0.212671, _lumG = 0.715160, _lumB = 0.072169, _applyMatrix = function(m, m2) { if (!(m instanceof Array) || !(m2 instanceof Array)) { return m2; } var temp = [], i = 0, z = 0, y, x; for (y = 0; y < 4; y++) { for (x = 0; x < 5; x++) { z = (x === 4) ? m[i + 4] : 0; temp[i + x] = m[i] * m2[x] + m[i+1] * m2[x + 5] + m[i+2] * m2[x + 10] + m[i+3] * m2[x + 15] + z; } i += 5; } return temp; }, _setSaturation = function(m, n) { if (isNaN(n)) { return m; } var inv = 1 - n, r = inv * _lumR, g = inv * _lumG, b = inv * _lumB; return _applyMatrix([r + n, g, b, 0, 0, r, g + n, b, 0, 0, r, g, b + n, 0, 0, 0, 0, 0, 1, 0], m); }, _colorize = function(m, color, amount) { if (isNaN(amount)) { amount = 1; } var c = _parseColor(color), r = c[0] / 255, g = c[1] / 255, b = c[2] / 255, inv = 1 - amount; return _applyMatrix([inv + amount * r * _lumR, amount * r * _lumG, amount * r * _lumB, 0, 0, amount * g * _lumR, inv + amount * g * _lumG, amount * g * _lumB, 0, 0, amount * b * _lumR, amount * b * _lumG, inv + amount * b * _lumB, 0, 0, 0, 0, 0, 1, 0], m); }, _setHue = function(m, n) { if (isNaN(n)) { return m; } n *= Math.PI / 180; var c = Math.cos(n), s = Math.sin(n); return _applyMatrix([(_lumR + (c * (1 - _lumR))) + (s * (-_lumR)), (_lumG + (c * (-_lumG))) + (s * (-_lumG)), (_lumB + (c * (-_lumB))) + (s * (1 - _lumB)), 0, 0, (_lumR + (c * (-_lumR))) + (s * 0.143), (_lumG + (c * (1 - _lumG))) + (s * 0.14), (_lumB + (c * (-_lumB))) + (s * -0.283), 0, 0, (_lumR + (c * (-_lumR))) + (s * (-(1 - _lumR))), (_lumG + (c * (-_lumG))) + (s * _lumG), (_lumB + (c * (1 - _lumB))) + (s * _lumB), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1], m); }, _setContrast = function(m, n) { if (isNaN(n)) { return m; } n += 0.01; return _applyMatrix([n,0,0,0,128 * (1 - n), 0,n,0,0,128 * (1 - n), 0,0,n,0,128 * (1 - n), 0,0,0,1,0], m); }, _parseColorMatrixFilter = function(t, v, pg) { if (!_ColorMatrixFilter) { _ColorMatrixFilter = (_gsScope.ColorMatrixFilter || _gsScope.createjs.ColorMatrixFilter); if (!_ColorMatrixFilter) { throw("EaselPlugin error: The EaselJS ColorMatrixFilter JavaScript file wasn't loaded."); } } var filters = t.filters || [], i = filters.length, matrix, startMatrix, s; while (--i > -1) { if (filters[i] instanceof _ColorMatrixFilter) { s = filters[i]; break; } } if (!s) { s = new _ColorMatrixFilter(_idMatrix.slice()); filters.push(s); t.filters = filters; } startMatrix = s.matrix; matrix = _idMatrix.slice(); if (v.colorize != null) { matrix = _colorize(matrix, v.colorize, Number(v.colorizeAmount)); } if (v.contrast != null) { matrix = _setContrast(matrix, Number(v.contrast)); } if (v.hue != null) { matrix = _setHue(matrix, Number(v.hue)); } if (v.saturation != null) { matrix = _setSaturation(matrix, Number(v.saturation)); } i = matrix.length; while (--i > -1) { if (matrix[i] !== startMatrix[i]) { pg._addTween(startMatrix, i, startMatrix[i], matrix[i], "easel_colorMatrixFilter"); } } pg._overwriteProps.push("easel_colorMatrixFilter"); if (!t.cacheID) { throw("EaselPlugin warning: for filters to display in EaselJS, you must call the object's cache() method first. " + t); } pg._matrix = startMatrix; }; _gsScope._gsDefine.plugin({ propName: "easel", priority: -1, version: "0.2.1", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { this._target = target; var p, pt, tint, colorMatrix, end, labels, i; for (p in value) { end = value[p]; if (typeof(end) === "function") { end = end(index, target); } if (p === "colorFilter" || p === "tint" || p === "tintAmount" || p === "exposure" || p === "brightness") { if (!tint) { _parseColorFilter(target, value.colorFilter || value, this); tint = true; } } else if (p === "saturation" || p === "contrast" || p === "hue" || p === "colorize" || p === "colorizeAmount") { if (!colorMatrix) { _parseColorMatrixFilter(target, value.colorMatrixFilter || value, this); colorMatrix = true; } } else if (p === "frame") { this._firstPT = pt = {_next:this._firstPT, t:target, p:"gotoAndStop", s:target.currentFrame, f:true, n:"frame", pr:0, type:0, m:Math.round}; if (typeof(end) === "string" && end.charAt(1) !== "=" && (labels = target.labels)) { for (i = 0; i < labels.length; i++) { if (labels[i].label === end) { end = labels[i].position; } } } pt.c = (typeof(end) === "number") ? end - pt.s : parseFloat((end+"").split("=").join("")); if (pt._next) { pt._next._prev = pt; } } else if (target[p] != null) { this._firstPT = pt = {_next:this._firstPT, t:target, p:p, f:(typeof(target[p]) === "function"), n:p, pr:0, type:0}; pt.s = (!pt.f) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ](); pt.c = (typeof(end) === "number") ? end - pt.s : (typeof(end) === "string") ? parseFloat(end.split("=").join("")) : 0; if (pt._next) { pt._next._prev = pt; } } } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { var pt = this._firstPT, min = 0.000001, val; while (pt) { val = pt.c * v + pt.s; if (pt.m) { val = pt.m(val, pt.t); } else if (val < min && val > -min) { val = 0; } if (pt.f) { pt.t[pt.p](val); } else { pt.t[pt.p] = val; } pt = pt._next; } if (this._target.cacheID) { this._target.updateCache(); } } }); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("EaselPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.0.2 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _cssRatioSetter = function(pt, cssp, mod) { //Takes an individual CSSPropTween and converts it into a type:2 that has a setRatio that does everything the regular CSSPlugin.setRatio() method does but applying the mod() too. We do this to keep the main CSSPlugin.setRatio() as fast as possible (the vast majority of times, no mod() will be necessary) var type = pt.type, oldSetRatio = pt.setRatio, tween = cssp._tween, target = cssp._target; pt.type = 2; pt.m = mod; pt.setRatio = function(v) { var min = 0.000001, val, str, i; if (v === 1 && (tween._time === tween._duration || tween._time === 0)) { if (type !== 2) { if (pt.r && type !== -1) { val = Math.round(pt.s + pt.c); if (!type) { pt.t[pt.p] = mod(val + pt.xs0, target); } else if (type === 1) { str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = mod(str, target); } } else { pt.t[pt.p] = mod(pt.e, target); } } else { oldSetRatio.call(pt, v); } } else if (v || !(tween._time === tween._duration || tween._time === 0) || tween._rawPrevTime === -0.000001) { val = pt.c * v + pt.s; if (pt.r) { val = Math.round(val); } else if (val < min) if (val > -min) { val = 0; } if (!type) { pt.t[pt.p] = mod(val + pt.xs0, target); } else if (type === 1) { str = pt.xs0 + val + pt.xs1; for (i = 1; i < pt.l; i++) { str += pt["xn"+i] + pt["xs"+(i+1)]; } pt.t[pt.p] = mod(str, target); } else if (type === -1) { //non-tweening value pt.t[pt.p] = mod(pt.xs0, target); } else if (oldSetRatio) { oldSetRatio.call(pt, v); } } else { if (type !== 2) { pt.t[pt.p] = mod(pt.b, target); } else { oldSetRatio.call(pt, v); } } }; }, _modCSS = function(lookup, cssp) { var pt = cssp._firstPT, hasBezier = (lookup.rotation && cssp._overwriteProps.join("").indexOf("bezier") !== -1); //when a Bezier tween is applying autoRotation, it's a very special case we need to handle differently. while (pt) { if (typeof(lookup[pt.p]) === "function") { _cssRatioSetter(pt, cssp, lookup[pt.p]); } else if (hasBezier && pt.n === "bezier" && pt.plugin._overwriteProps.join("").indexOf("rotation") !== -1) { pt.data.mod = lookup.rotation; } pt = pt._next; } }, ModifiersPlugin = _gsScope._gsDefine.plugin({ propName: "modifiers", version: "0.0.2", API: 2, //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { this._tween = tween; this._vars = value; return true; }, initAll: function() { var tween = this._tween, lookup = this._vars, mpt = this, pt = tween._firstPT, val, next; while (pt) { next = pt._next; //record here, because it may get removed val = lookup[pt.n]; if (pt.pg) { if (pt.t._propName === "css") { //handle CSSPlugin uniquely (for performance, due to the fact that the values almost always are a concatenation of numbers and strings, like suffixes, and we don't want to slow down the regular CSSPlugin setRatio() performance with conditional checks for if the value needs to be modded, so we pull any modding prop out and change it to a type:2 one that simply calls a setRatio() method where we encapsulate the modding and update all together. That way, it says in the main CSSProp linked list and just has some custom logic applied to it inside its setRatio()) _modCSS(lookup, pt.t); } else if (pt.t !== mpt) { //don't run modProps on modProps :) val = lookup[pt.t._propName]; pt.t._mod((typeof(val) === "object") ? val : lookup); } } else if (typeof(val) === "function") { if (pt.f === 2 && pt.t) { //a blob (text containing multiple numeric values) pt.t._applyPT.m = val; } else { this._add(pt.t, pt.p, pt.s, pt.c, val); //remove from linked list if (next) { next._prev = pt._prev; } if (pt._prev) { pt._prev._next = next; } else if (tween._firstPT === pt) { tween._firstPT = next; } pt._next = pt._prev = null; tween._propLookup[pt.n] = mpt; } } pt = next; } return false; } }), p = ModifiersPlugin.prototype; p._add = function(target, p, s, c, mod) { this._addTween(target, p, s, s + c, p, mod); this._overwriteProps.push(p); }; p = _gsScope._gsDefine.globals.TweenLite.version.split("."); Iif (Number(p[0]) <= 1 && Number(p[1]) < 19 && _gsScope.console) { console.log("ModifiersPlugin requires GSAP 1.19.0 or later."); } }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("ModifiersPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | 2 2 2 2 | /*! * VERSION: 1.8.1 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _doc = document.documentElement, _window = _gsScope, _max = function(element, axis) { var dim = (axis === "x") ? "Width" : "Height", scroll = "scroll" + dim, client = "client" + dim, body = document.body; return (element === _window || element === _doc || element === body) ? Math.max(_doc[scroll], body[scroll]) - (_window["inner" + dim] || _doc[client] || body[client]) : element[scroll] - element["offset" + dim]; }, _unwrapElement = function(value) { if (typeof(value) === "string") { value = TweenLite.selector(value); } if (value.length && value !== _window && value[0] && value[0].style && !value.nodeType) { value = value[0]; } return (value === _window || (value.nodeType && value.style)) ? value : null; }, _buildGetter = function(e, axis) { //pass in an element and an axis ("x" or "y") and it'll return a getter function for the scroll position of that element (like scrollTop or scrollLeft, although if the element is the window, it'll use the pageXOffset/pageYOffset or the documentElement's scrollTop/scrollLeft or document.body's. Basically this streamlines things and makes a very fast getter across browsers. var p = "scroll" + ((axis === "x") ? "Left" : "Top"); if (e === _window) { if (e.pageXOffset != null) { p = "page" + axis.toUpperCase() + "Offset"; } else if (_doc[p] != null) { e = _doc; } else { e = document.body; } } return function() { return e[p]; }; }, _getOffset = function(element, container) { var rect = _unwrapElement(element).getBoundingClientRect(), isRoot = (!container || container === _window || container === document.body), cRect = (isRoot ? _doc : container).getBoundingClientRect(), offsets = {x: rect.left - cRect.left, y: rect.top - cRect.top}; if (!isRoot && container) { //only add the current scroll position if it's not the window/body. offsets.x += _buildGetter(container, "x")(); offsets.y += _buildGetter(container, "y")(); } return offsets; }, _parseVal = function(value, target, axis) { var type = typeof(value); if (type === "number" || (type === "string" && value.charAt(1) === "=")) { return value; } else if (value === "max") { return _max(target, axis); } return Math.min(_max(target, axis), _getOffset(value, target)[axis]); }, ScrollToPlugin = _gsScope._gsDefine.plugin({ propName: "scrollTo", API: 2, global: true, version:"1.8.1", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween) { this._wdw = (target === _window); this._target = target; this._tween = tween; if (typeof(value) !== "object") { value = {y:value}; //if we don't receive an object as the parameter, assume the user intends "y". if (typeof(value.y) === "string" && value.y !== "max" && value.y.charAt(1) !== "=") { value.x = value.y; } } else if (value.nodeType) { value = {y:value, x:value}; } this.vars = value; this._autoKill = (value.autoKill !== false); this.getX = _buildGetter(target, "x"); this.getY = _buildGetter(target, "y"); this.x = this.xPrev = this.getX(); this.y = this.yPrev = this.getY(); if (value.x != null) { this._addTween(this, "x", this.x, _parseVal(value.x, target, "x") - (value.offsetX || 0), "scrollTo_x", true); this._overwriteProps.push("scrollTo_x"); } else { this.skipX = true; } if (value.y != null) { this._addTween(this, "y", this.y, _parseVal(value.y, target, "y") - (value.offsetY || 0), "scrollTo_y", true); this._overwriteProps.push("scrollTo_y"); } else { this.skipY = true; } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(v) { this._super.setRatio.call(this, v); var x = (this._wdw || !this.skipX) ? this.getX() : this.xPrev, y = (this._wdw || !this.skipY) ? this.getY() : this.yPrev, yDif = y - this.yPrev, xDif = x - this.xPrev, threshold = ScrollToPlugin.autoKillThreshold; if (this.x < 0) { //can't scroll to a position less than 0! Might happen if someone uses a Back.easeOut or Elastic.easeOut when scrolling back to the top of the page (for example) this.x = 0; } if (this.y < 0) { this.y = 0; } if (this._autoKill) { //note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match. if (!this.skipX && (xDif > threshold || xDif < -threshold) && x < _max(this._target, "x")) { this.skipX = true; //if the user scrolls separately, we should stop tweening! } if (!this.skipY && (yDif > threshold || yDif < -threshold) && y < _max(this._target, "y")) { this.skipY = true; //if the user scrolls separately, we should stop tweening! } if (this.skipX && this.skipY) { this._tween.kill(); if (this.vars.onAutoKill) { this.vars.onAutoKill.apply(this.vars.onAutoKillScope || this._tween, this.vars.onAutoKillParams || []); } } } if (this._wdw) { _window.scrollTo((!this.skipX) ? this.x : x, (!this.skipY) ? this.y : y); } else { if (!this.skipY) { this._target.scrollTop = this.y; } if (!this.skipX) { this._target.scrollLeft = this.x; } } this.xPrev = this.x; this.yPrev = this.y; } }), p = ScrollToPlugin.prototype; ScrollToPlugin.max = _max; ScrollToPlugin.getOffset = _getOffset; ScrollToPlugin.autoKillThreshold = 7; p._kill = function(lookup) { if (lookup.scrollTo_x) { this.skipX = true; } if (lookup.scrollTo_y) { this.skipY = true; } return this._super._kill.call(this, lookup); }; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("ScrollToPlugin")); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 1 1 1 1 | /*! * VERSION: 1.2.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * This file is to be used as a simple template for writing your own plugin. See the * TweenPlugin docs for more details. * * You can start by doing a search for "yourCustomProperty" and replace it with whatever the name * of your property is. This way of defining a plugin was introduced in version 1.9.0 - previous versions * of TweenLite won't work with this. * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { //ignore the line above this and at the very end - those are for ensuring things load in the proper order "use strict"; _gsScope._gsDefine.plugin({ propName: "yourCustomProperty", //the name of the property that will get intercepted and handled by this plugin (obviously change it to whatever you want, typically it is camelCase starting with lowercase). priority: 0, //the priority in the rendering pipeline (0 by default). A priority of -1 would mean this plugin will run after all those with 0 or greater. A priority of 1 would get run before 0, etc. This only matters when a plugin relies on other plugins finishing their work before it runs (or visa-versa) API: 2, //the API should stay 2 - it just gives us a way to know the method/property structure so that if in the future we change to a different TweenPlugin architecture, we can identify this plugin's structure. version: "1.0.0", //your plugin's version number overwriteProps: ["yourCustomProperty"], //an array of property names whose tweens should be overwritten by this plugin. For example, if you create a "scale" plugin that handles both "scaleX" and "scaleY", the overwriteProps would be ["scaleX","scaleY"] so that if there's a scaleX or scaleY tween in-progress when a new "scale" tween starts (using this plugin), it would overwrite the scaleX or scaleY tween. /* * The init function is called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. It receives 3 parameters: * 1) target [object] - the target of the tween. In cases where the tween's original target is an array (or jQuery object), this target will be the individual object inside that array (a new plugin instance is created for each target in the array). For example, TweenLite.to([obj1, obj2, obj3], 1, {x:100}) the target will be obj1 or obj2 or obj3 rather than the array containing them. * 2) value [*] - whatever value is passed as the special property value. For example, TweenLite.to(element, 1, {yourCustomProperty:3}) the value would be 3. Or for TweenLite.to(element, 1, {yourCustomProperty:{subProp1:3, subProp2:"whatever"}});, value would be {subProp1:3, subProp2:"whatever"}. * 3) tween [TweenLite] - the TweenLite (or TweenMax) instance that is managing this plugin instance. This can be useful if you need to check certain state-related properties on the tween (maybe in the set method) like its duration or time. Most of the time, however, you don't need to do anything with the tween. It is provided just in case you want to reference it. * 4) index [integer] - the index number of the target in the tween. For example, if an array is passed in as the target (or selector text), this would be 0 for the first one, 1 for the second, 2 for the third, etc. This was introduced in GSAP 1.19.0 * * This function should return true unless you want to have TweenLite/Max skip the plugin altogether and instead treat the property/value like a normal tween (as if the plugin wasn't activated). This is rarely useful, so you should almost always return true. */ init: function(target, value, tween, index) { this._target = target; //we record the target so that we can refer to it in the set method when doing updates. /* Next, we create a property tween for "scaleX" and "scaleY" properties of our target * (we're just using them as a examples of how to set up a property tween with a name, start, and end value). * the _addTween() method accepts the following parameters: * 1) target [object] - target object whose property this tween will control. * 2) property [string] - the name of the property, like "scaleX" or "scaleY" * 3) start [number] - The starting value of the property. For example, if you're tweening from 0 to 100, start would be 0. * 4) end [number] - the ending value of the property. For example, if you're tweening from 0 to 100, end would be 100. * 5) overwriteProperty [string] - the name that gets registered as the overwrite property so that if another concurrent tween of the same target gets created and it is tweening a property with this name, this one will be overwritten. Typically this is the same as "property". * 6) round [boolean] - if true, the updated value on each update will be rounded to the nearest integer. [false by default] * You do NOT need to use _addTween() at all. It is merely a convenience. You can record your own values internally or whatever you want. */ this._addTween(target, "scaleX", target.scaleX, value, "scaleX", false); this._addTween(target, "scaleY", target.scaleY, value, "scaleY", false); //now, just for kicks, we'll record the starting "alpha" value and amount of change so that we can manage this manually rather than _addTween() (again, totally fictitious, just for an example) this._alphaStart = target.alpha; this._alphaChange = value.alpha - target.alpha; //always return true unless we want to scrap the plugin and have the value treated as a normal property tween (very uncommon) return true; }, //[optional] - called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.). If you're using this._super._addTween() for all your tweens and you don't need to do anything special on each frame besides updating those values, you can omit this "set" function altogether. set: function(ratio) { //since we used _addTween() inside init function, it created some property tweens that we'll update by calling the parent prototype's setRatio() (otherwise, the property tweens wouldn't get their values updated). this._super refers to the TweenPlugin prototype from which the plugin inherits (not that you need to worry about that). this._super.setRatio.call(this, ratio); //now manually set the alpha this._target.alpha = this._alphaStart + this._alphaChange * ratio; } }); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | 1 1 1 1 1 1 1 1 1 1 1 1 | /*! * VERSION: 0.5.2 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var _getText = function(e) { var type = e.nodeType, result = ""; if (type === 1 || type === 9 || type === 11) { if (typeof(e.textContent) === "string") { return e.textContent; } else { for ( e = e.firstChild; e; e = e.nextSibling ) { result += _getText(e); } } } else if (type === 3 || type === 4) { return e.nodeValue; } return result; }, TextPlugin = _gsScope._gsDefine.plugin({ propName: "text", API: 2, version:"0.5.2", //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. init: function(target, value, tween, index) { var i = target.nodeName.toUpperCase(), shrt; if (typeof(value) === "function") { value = value(index, target); } this._svg = (target.getBBox && (i === "TEXT" || i === "TSPAN")); if (!("innerHTML" in target) && !this._svg) { return false; } this._target = target; if (typeof(value) !== "object") { value = {value:value}; } if (value.value === undefined) { this._text = this._original = [""]; return true; } this._delimiter = value.delimiter || ""; this._original = _getText(target).replace(/\s+/g, " ").split(this._delimiter); this._text = value.value.replace(/\s+/g, " ").split(this._delimiter); this._runBackwards = (tween.vars.runBackwards === true); if (this._runBackwards) { i = this._original; this._original = this._text; this._text = i; } if (typeof(value.newClass) === "string") { this._newClass = value.newClass; this._hasClass = true; } if (typeof(value.oldClass) === "string") { this._oldClass = value.oldClass; this._hasClass = true; } i = this._original.length - this._text.length; shrt = (i < 0) ? this._original : this._text; this._fillChar = value.fillChar || (value.padSpace ? " " : ""); if (i < 0) { i = -i; } while (--i > -1) { shrt.push(this._fillChar); } return true; }, //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.) set: function(ratio) { if (ratio > 1) { ratio = 1; } else if (ratio < 0) { ratio = 0; } if (this._runBackwards) { ratio = 1 - ratio; } var l = this._text.length, i = (ratio * l + 0.5) | 0, applyNew, applyOld, str; if (this._hasClass) { applyNew = (this._newClass && i !== 0); applyOld = (this._oldClass && i !== l); str = (applyNew ? "<span class='" + this._newClass + "'>" : "") + this._text.slice(0, i).join(this._delimiter) + (applyNew ? "</span>" : "") + (applyOld ? "<span class='" + this._oldClass + "'>" : "") + this._delimiter + this._original.slice(i).join(this._delimiter) + (applyOld ? "</span>" : ""); } else { str = this._text.slice(0, i).join(this._delimiter) + this._delimiter + this._original.slice(i).join(this._delimiter); } if (this._svg) { //SVG text elements don't have an "innerHTML" in Microsoft browsers. this._target.textContent = str; } else { this._target.innerHTML = (this._fillChar === " " && str.indexOf(" ") !== -1) ? str.split(" ").join(" ") : str; } } }), p = TextPlugin.prototype; p._newClass = p._oldClass = p._delimiter = ""; }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; Iif (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else Eif (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("TextPlugin")); |
| File | Statements | Branches | Functions | Lines | |||||
|---|---|---|---|---|---|---|---|---|---|
| Draggable.js | 0.52% | (8 / 1551) | 0.81% | (14 / 1728) | 3.57% | (4 / 112) | 0.45% | (7 / 1544) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 | 2 2 2 2 4 2 2 | /*! * VERSION: 0.15.0 * DATE: 2017-01-17 * UPDATES AND DOCS AT: http://greensock.com * * Requires TweenLite and CSSPlugin version 1.17.0 or later (TweenMax contains both TweenLite and CSSPlugin). ThrowPropsPlugin is required for momentum-based continuation of movement after the mouse/touch is released (ThrowPropsPlugin is a membership benefit of Club GreenSock - http://greensock.com/club/). * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite","plugins.CSSPlugin"], function(EventDispatcher, TweenLite, CSSPlugin) { var _tempVarsXY = {css:{}}, //speed optimization - we reuse the same vars object for x/y TweenLite.set() calls to minimize garbage collection tasks and improve performance. _tempVarsX = {css:{}}, _tempVarsY = {css:{}}, _tempVarsRotation = {css:{}}, _globals = _gsScope._gsDefine.globals, _tempEvent = {}, //for populating with pageX/pageY in old versions of IE _dummyElement = {style:{}}, _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, _docElement = _doc.documentElement || {}, _createElement = function(type) { return _doc.createElementNS ? _doc.createElementNS("http://www.w3.org/1999/xhtml", type) : _doc.createElement(type); }, _tempDiv = _createElement("div"), _emptyArray = [], _emptyFunc = function() { return false; }, _RAD2DEG = 180 / Math.PI, _max = 999999999999999, _getTime = Date.now || function() {return new Date().getTime();}, _isOldIE = !!(!_doc.addEventListener && _doc.all), _placeholderDiv = _doc.createElement("div"), _renderQueue = [], _lookup = {}, //when a Draggable is created, the target gets a unique _gsDragID property that allows gets associated with the Draggable instance for quick lookups in Draggable.get(). This avoids circular references that could cause gc problems. _lookupCount = 0, _clickableTagExp = /^(?:a|input|textarea|button|select)$/i, _dragCount = 0, //total number of elements currently being dragged _prefix, _isMultiTouching, _isAndroid = (navigator.userAgent.toLowerCase().indexOf("android") !== -1), //Android handles touch events in an odd way and it's virtually impossible to "feature test" so we resort to UA sniffing _lastDragTime = 0, _temp1 = {}, // a simple object we reuse and populate (usually x/y properties) to conserve memory and improve performance. _windowProxy = {}, //memory/performance optimization - we reuse this object during autoScroll to store window-related bounds/offsets. _slice = function(a) { //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll() if (typeof(a) === "string") { a = TweenLite.selector(a); } if (!a || a.nodeType) { //if it's not an array, wrap it in one. return [a]; } var b = [], l = a.length, i; for (i = 0; i !== l; b.push(a[i++])); return b; }, _copy = function(obj, factor) { var copy = {}, p; if (factor) { for (p in obj) { copy[p] = obj[p] * factor; } } else { for (p in obj) { copy[p] = obj[p]; } } return copy; }, ThrowPropsPlugin, _renderQueueTick = function() { var i = _renderQueue.length; while (--i > -1) { _renderQueue[i](); } }, _addToRenderQueue = function(func) { _renderQueue.push(func); if (_renderQueue.length === 1) { TweenLite.ticker.addEventListener("tick", _renderQueueTick, this, false, 1); } }, _removeFromRenderQueue = function(func) { var i = _renderQueue.length; while (--i > -1) { if (_renderQueue[i] === func) { _renderQueue.splice(i, 1); } } TweenLite.to(_renderQueueTimeout, 0, {overwrite:"all", delay:15, onComplete:_renderQueueTimeout}); //remove the "tick" listener only after the render queue is empty for 15 seconds (to improve performance). Adding/removing it constantly for every click/touch wouldn't deliver optimal speed, and we also don't want the ticker to keep calling the render method when things are idle for long periods of time (we want to improve battery life on mobile devices). }, _renderQueueTimeout = function() { if (!_renderQueue.length) { TweenLite.ticker.removeEventListener("tick", _renderQueueTick); } }, _extend = function(obj, defaults) { var p; for (p in defaults) { if (obj[p] === undefined) { obj[p] = defaults[p]; } } return obj; }, _getDocScrollTop = function() { return (window.pageYOffset != null) ? window.pageYOffset : (_doc.scrollTop != null) ? _doc.scrollTop : _docElement.scrollTop || _doc.body.scrollTop || 0; }, _getDocScrollLeft = function() { return (window.pageXOffset != null) ? window.pageXOffset : (_doc.scrollLeft != null) ? _doc.scrollLeft : _docElement.scrollLeft || _doc.body.scrollLeft || 0; }, _addScrollListener = function(e, callback) { _addListener(e, "scroll", callback); if (!_isRoot(e.parentNode)) { _addScrollListener(e.parentNode, callback); } }, _removeScrollListener = function(e, callback) { _removeListener(e, "scroll", callback); if (!_isRoot(e.parentNode)) { _removeScrollListener(e.parentNode, callback); } }, _isRoot = function (e) { return !!(!e || e === _docElement || e === _doc || e === _doc.body || e === window || !e.nodeType || !e.parentNode); }, _getMaxScroll = function(element, axis) { var dim = (axis === "x") ? "Width" : "Height", scroll = "scroll" + dim, client = "client" + dim, body = _doc.body; return Math.max(0, _isRoot(element) ? Math.max(_docElement[scroll], body[scroll]) - (window["inner" + dim] || _docElement[client] || body[client]) : element[scroll] - element[client]); }, _recordMaxScrolls = function(e) { //records _gsMaxScrollX and _gsMaxScrollY properties for the element and all ancestors up the chain so that we can cap it, otherwise dragging beyond the edges with autoScroll on can endlessly scroll. var isRoot = _isRoot(e), x = _getMaxScroll(e, "x"), y = _getMaxScroll(e, "y"); if (isRoot) { e = _windowProxy; } else { _recordMaxScrolls(e.parentNode); } e._gsMaxScrollX = x; e._gsMaxScrollY = y; e._gsScrollX = e.scrollLeft || 0; e._gsScrollY = e.scrollTop || 0; }, //just used for IE8 and earlier to normalize events and populate pageX/pageY _populateIEEvent = function(e, preventDefault) { e = e || window.event; _tempEvent.pageX = e.clientX + _doc.body.scrollLeft + _docElement.scrollLeft; _tempEvent.pageY = e.clientY + _doc.body.scrollTop + _docElement.scrollTop; if (preventDefault) { e.returnValue = false; } return _tempEvent; }, //grabs the first element it finds (and we include the window as an element), so if it's selector text, it'll feed that value to TweenLite.selector, if it's a jQuery object or some other selector engine's result, it'll grab the first one, and same for an array. If the value doesn't contain a DOM element, it'll just return null. _unwrapElement = function(value) { if (!value) { return value; } if (typeof(value) === "string") { value = TweenLite.selector(value); } if (value.length && value !== window && value[0] && value[0].style && !value.nodeType) { value = value[0]; } return (value === window || (value.nodeType && value.style)) ? value : null; }, _checkPrefix = function(e, p) { var s = e.style, capped, i, a; if (s[p] === undefined) { a = ["O","Moz","ms","Ms","Webkit"]; i = 5; capped = p.charAt(0).toUpperCase() + p.substr(1); while (--i > -1 && s[a[i]+capped] === undefined) { } if (i < 0) { return ""; } _prefix = (i === 3) ? "ms" : a[i]; p = _prefix + capped; } return p; }, _setStyle = function(e, p, value) { var s = e.style; if (!s) { return; } if (s[p] === undefined) { p = _checkPrefix(e, p); } if (value == null) { if (s.removeProperty) { s.removeProperty(p.replace(/([A-Z])/g, "-$1").toLowerCase()); } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" s.removeAttribute(p); } } else if (s[p] !== undefined) { s[p] = value; } }, _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : _emptyFunc, _horizExp = /(?:Left|Right|Width)/i, _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g, _convertToPixels = function(t, p, v, sfx, recurse) { if (sfx === "px" || !sfx) { return v; } if (sfx === "auto" || !v) { return 0; } var horiz = _horizExp.test(p), node = t, style = _tempDiv.style, neg = (v < 0), pix; if (neg) { v = -v; } if (sfx === "%" && p.indexOf("border") !== -1) { pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight); } else { style.cssText = "border:0 solid red;position:" + _getStyle(t, "position", true) + ";line-height:0;"; if (sfx === "%" || !node.appendChild) { node = t.parentNode || _doc.body; style[(horiz ? "width" : "height")] = v + sfx; } else { style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx; } node.appendChild(_tempDiv); pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]); node.removeChild(_tempDiv); if (pix === 0 && !recurse) { pix = _convertToPixels(t, p, v, sfx, true); } } return neg ? -pix : pix; }, _calculateOffset = function(t, p) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop if (_getStyle(t, "position", true) !== "absolute") { return 0; } var dim = ((p === "left") ? "Left" : "Top"), v = _getStyle(t, "margin" + dim, true); return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), (v + "").replace(_suffixExp, "")) || 0); }, _getStyle = function(element, prop, keepUnits) { var rv = (element._gsTransform || {})[prop], cs; if (rv || rv === 0) { return rv; } else if (element.style[prop]) { rv = element.style[prop]; } else if ((cs = _getComputedStyle(element))) { rv = cs.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase()); rv = (rv || cs.length) ? rv : cs[prop]; //Opera behaves VERY strangely - length is usually 0 and cs[prop] is the only way to get accurate results EXCEPT when checking for -o-transform which only works with cs.getPropertyValue()! } else if (element.currentStyle) { rv = element.currentStyle[prop]; } if (rv === "auto" && (prop === "top" || prop === "left")) { rv = _calculateOffset(element, prop); } return keepUnits ? rv : parseFloat(rv) || 0; }, _dispatchEvent = function(instance, type, callbackName) { var vars = instance.vars, callback = vars[callbackName], listeners = instance._listeners[type]; if (typeof(callback) === "function") { callback.apply(vars[callbackName + "Scope"] || vars.callbackScope || instance, vars[callbackName + "Params"] || [instance.pointerEvent]); } if (listeners) { instance.dispatchEvent(type); } }, _getBounds = function(obj, context) { //accepts any of the following: a DOM element, jQuery object, selector text, or an object defining bounds as {top, left, width, height} or {minX, maxX, minY, maxY}. Returns an object with left, top, width, and height properties. var e = _unwrapElement(obj), top, left, offset; if (!e) { if (obj.left !== undefined) { offset = _getOffsetTransformOrigin(context); //the bounds should be relative to the origin return {left: obj.left - offset.x, top: obj.top - offset.y, width: obj.width, height: obj.height}; } left = obj.min || obj.minX || obj.minRotation || 0; top = obj.min || obj.minY || 0; return {left:left, top:top, width:(obj.max || obj.maxX || obj.maxRotation || 0) - left, height:(obj.max || obj.maxY || 0) - top}; } return _getElementBounds(e, context); }, _svgBorderFactor, _svgBorderScales, _svgScrollOffset, _hasBorderBug, _hasReparentBug,//some browsers, like Chrome 49, alter the offsetTop/offsetLeft/offsetParent of elements when a non-identity transform is applied. _setEnvironmentVariables = function() { //some browsers factor the border into the SVG coordinate space, some don't (like Firefox). Some apply transforms to them, some don't. We feature-detect here so we know how to handle the border(s). We can't do this immediately - we must wait for the document.body to exist. if (!_doc.createElementNS) { _svgBorderFactor = 0; _svgBorderScales = false; return; } var div = _createElement("div"), svg = _doc.createElementNS("http://www.w3.org/2000/svg", "svg"), wrapper = _createElement("div"), style = div.style, parent = _doc.body || _docElement, matrix, e1, point, oldValue; if (_doc.body && _transformProp) { style.position = "absolute"; parent.appendChild(wrapper); wrapper.appendChild(div); oldValue = div.offsetParent; wrapper.style[_transformProp] = "rotate(1deg)"; _hasReparentBug = (div.offsetParent === oldValue); wrapper.style.position = "absolute"; style.height = "10px"; oldValue = div.offsetTop; wrapper.style.border = "5px solid red"; _hasBorderBug = (oldValue !== div.offsetTop); //some browsers, like Firefox 38, cause the offsetTop/Left to be affected by a parent's border. parent.removeChild(wrapper); } style = svg.style; svg.setAttributeNS(null, "width", "400px"); svg.setAttributeNS(null, "height", "400px"); svg.setAttributeNS(null, "viewBox", "0 0 400 400"); style.display = "block"; style.boxSizing = "border-box"; style.border = "0px solid red"; style.transform = "none"; // in some browsers (like certain flavors of Android), the getScreenCTM() matrix is contaminated by the scroll position. We can run some logic here to detect that condition, but we ended up not needing this because we found another workaround using getBoundingClientRect(). div.style.cssText = "width:100px;height:100px;overflow:scroll;-ms-overflow-style:none;"; parent.appendChild(div); div.appendChild(svg); point = svg.createSVGPoint().matrixTransform(svg.getScreenCTM()); e1 = point.y; div.scrollTop = 100; point.x = point.y = 0; point = point.matrixTransform(svg.getScreenCTM()); _svgScrollOffset = (e1 - point.y < 100.1) ? 0 : e1 - point.y - 150; div.removeChild(svg); parent.removeChild(div); // -- end _svgScrollOffset calculation. parent.appendChild(svg); matrix = svg.getScreenCTM(); e1 = matrix.e; style.border = "50px solid red"; matrix = svg.getScreenCTM(); if (e1 === 0 && matrix.e === 0 && matrix.f === 0 && matrix.a === 1) { //Opera has a bunch of bugs - it doesn't adjust the x/y of the matrix, nor does it scale when box-sizing is border-box but it does so elsewhere; to get the correct behavior we set _svgBorderScales to true. _svgBorderFactor = 1; _svgBorderScales = true; } else { _svgBorderFactor = (e1 !== matrix.e) ? 1 : 0; _svgBorderScales = (matrix.a !== 1); } parent.removeChild(svg); }, _supports3D = (_checkPrefix(_tempDiv, "perspective") !== ""), // start matrix and point conversion methods... _transformOriginProp = _checkPrefix(_tempDiv, "transformOrigin").replace(/^ms/g, "Ms").replace(/([A-Z])/g, "-$1").toLowerCase(), _transformProp = _checkPrefix(_tempDiv, "transform"), _transformPropCSS = _transformProp.replace(/^ms/g, "Ms").replace(/([A-Z])/g, "-$1").toLowerCase(), _point1 = {}, //we reuse _point1 and _point2 objects inside matrix and point conversion methods to conserve memory and minimize garbage collection tasks. _point2 = {}, _SVGElement = window.SVGElement, _isSVG = function(e) { return !!(_SVGElement && typeof(e.getBBox) === "function" && e.getCTM && (!e.parentNode || (e.parentNode.getBBox && e.parentNode.getCTM))); }, _isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9. _tempTransforms = [], _tempElements = [], _getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29 and Android), so we have to do some work to manufacture those values. You can pass any SVG element and it'll spit back an object with offsetTop, offsetLeft, offsetParent, scaleX, and scaleY properties. We need the scaleX and scaleY to handle the way SVG can resize itself based on the container. if (!e.getBoundingClientRect || !e.parentNode || !_transformProp) { return {offsetTop:0, offsetLeft:0, scaleX:1, scaleY:1, offsetParent:_docElement}; } if (Draggable.cacheSVGData !== false && e._dCache && e._dCache.lastUpdate === TweenLite.ticker.frame) { //performance optimization. Assume that if the offsets are requested again on the same tick, we can just feed back the values we already calculated (no need to keep recalculating until another tick elapses). return e._dCache; } var curElement = e, cache = _cache(e), eRect, parentRect, offsetParent, cs, m, i, point1, point2, borderWidth, borderHeight, width, height; cache.lastUpdate = TweenLite.ticker.frame; if (e.getBBox && !cache.isSVGRoot) { //if it's a nested/child SVG element, we must find the parent SVG canvas and measure the offset from there. curElement = e.parentNode; eRect = e.getBBox(); while (curElement && (curElement.nodeName + "").toLowerCase() !== "svg") { curElement = curElement.parentNode; } cs = _getSVGOffsets(curElement); cache.offsetTop = eRect.y * cs.scaleY; cache.offsetLeft = eRect.x * cs.scaleX; cache.scaleX = cs.scaleX; cache.scaleY = cs.scaleY; cache.offsetParent = curElement || _docElement; return cache; } //only root SVG elements continue here... offsetParent = cache.offsetParent; if (offsetParent === _doc.body) { offsetParent = _docElement; //avoids problems with margins/padding on the body } //walk up the ancestors and record any non-identity transforms (and reset them to "none") until we reach the offsetParent. We must do this so that the getBoundingClientRect() is accurate for measuring the offsetTop/offsetLeft. We'll revert the values later... _tempElements.length = _tempTransforms.length = 0; while (curElement) { m = _getStyle(curElement, _transformProp, true); if (m !== "matrix(1, 0, 0, 1, 0, 0)" && m !== "none" && m !== "translate3d(0px, 0px, 0px)") { _tempElements.push(curElement); _tempTransforms.push(curElement.style[_transformProp]); curElement.style[_transformProp] = "none"; } if (curElement === offsetParent) { break; } curElement = curElement.parentNode; } parentRect = offsetParent.getBoundingClientRect(); m = e.getScreenCTM(); point2 = e.createSVGPoint(); point1 = point2.matrixTransform(m); point2.x = point2.y = 10; point2 = point2.matrixTransform(m); cache.scaleX = (point2.x - point1.x) / 10; cache.scaleY = (point2.y - point1.y) / 10; if (_svgBorderFactor === undefined) { _setEnvironmentVariables(); } if (cache.borderBox && !_svgBorderScales && e.getAttribute("width")) { //some browsers (like Safari) don't properly scale the matrix to accommodate the border when box-sizing is border-box, so we must calculate it here... cs = _getComputedStyle(e) || {}; borderWidth = (parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth)) || 0; borderHeight = (parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth)) || 0; width = parseFloat(cs.width) || 0; height = parseFloat(cs.height) || 0; cache.scaleX *= (width - borderWidth) / width; cache.scaleY *= (height - borderHeight) / height; } if (_svgScrollOffset) { //some browsers (like Chrome for Android) have bugs in the way getScreenCTM() is reported (it doesn't factor in scroll position), so we must revert to a more expensive technique for calculating offsetTop/Left. eRect = e.getBoundingClientRect(); cache.offsetLeft = eRect.left - parentRect.left; cache.offsetTop = eRect.top - parentRect.top; } else { cache.offsetLeft = point1.x - parentRect.left; cache.offsetTop = point1.y - parentRect.top; } cache.offsetParent = offsetParent; i = _tempElements.length; while (--i > -1) { _tempElements[i].style[_transformProp] = _tempTransforms[i]; } return cache; }, _getOffsetTransformOrigin = function(e, decoratee) { //returns the x/y position of the transformOrigin of the element, in its own local coordinate system (pixels), offset from the top left corner. decoratee = decoratee || {}; if (!e || e === _docElement || !e.parentNode || e === window) { return {x:0, y:0}; } var cs = _getComputedStyle(e), v = (_transformOriginProp && cs) ? cs.getPropertyValue(_transformOriginProp) : "50% 50%", a = v.split(" "), x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0], y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1]; if (y === "center" || y == null) { y = "50%"; } if (x === "center" || isNaN(parseFloat(x))) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative. x = "50%"; } if (e.getBBox && _isSVG(e)) { //SVG elements must be handled in a special way because their origins are calculated from the top left. if (!e._gsTransform) { TweenLite.set(e, {x:"+=0", overwrite:false}); //forces creation of the _gsTransform where we store all the transform components including xOrigin and yOrigin for SVG elements, as of GSAP 1.15.0 which also takes care of calculating the origin from the upper left corner of the SVG canvas. if (e._gsTransform.xOrigin === undefined) { console.log("Draggable requires at least GSAP 1.17.0"); } } v = e.getBBox(); decoratee.x = (e._gsTransform.xOrigin - v.x); decoratee.y = (e._gsTransform.yOrigin - v.y); } else { if (e.getBBox && (x + y).indexOf("%") !== -1) { //Firefox doesn't report offsetWidth/height on <svg> elements. e = e.getBBox(); e = {offsetWidth: e.width, offsetHeight: e.height}; } decoratee.x = ((x.indexOf("%") !== -1) ? e.offsetWidth * parseFloat(x) / 100 : parseFloat(x)); decoratee.y = ((y.indexOf("%") !== -1) ? e.offsetHeight * parseFloat(y) / 100 : parseFloat(y)); } return decoratee; }, _cache = function(e) { //computes some important values and stores them in a _dCache object attached to the element itself so that we can optimize performance if (Draggable.cacheSVGData !== false && e._dCache && e._dCache.lastUpdate === TweenLite.ticker.frame) { //performance optimization. Assume that if the offsets are requested again on the same tick, we can just feed back the values we already calculated (no need to keep recalculating until another tick elapses). return e._dCache; } var cache = e._dCache = e._dCache || {}, cs = _getComputedStyle(e), isSVG = (e.getBBox && _isSVG(e)), isSVGRoot = ((e.nodeName + "").toLowerCase() === "svg"), curSVG; cache.isSVG = isSVG; cache.isSVGRoot = isSVGRoot; cache.borderBox = (cs.boxSizing === "border-box"); cache.computedStyle = cs; if (isSVGRoot) { //some browsers don't report parentNode on SVG elements. curSVG = e.parentNode || _docElement; curSVG.insertBefore(_tempDiv, e); cache.offsetParent = _tempDiv.offsetParent || _docElement; //in some cases, Firefox still reports offsetParent as null. curSVG.removeChild(_tempDiv); } else if (isSVG) { curSVG = e.parentNode; while (curSVG && (curSVG.nodeName + "").toLowerCase() !== "svg") { //offsetParent is always the SVG canvas for SVG elements. curSVG = curSVG.parentNode; } cache.offsetParent = curSVG; } else { cache.offsetParent = e.offsetParent; } return cache; }, _getOffset2DMatrix = function(e, offsetOrigin, parentOffsetOrigin, zeroOrigin) { if (e === window || !e || !e.style || !e.parentNode) { return [1,0,0,1,0,0]; } var cache = e._dCache || _cache(e), parent = e.parentNode, parentCache = parent._dCache || _cache(parent), cs = cache.computedStyle, parentOffsetParent = cache.isSVG ? parentCache.offsetParent : parent.offsetParent, m, isRoot, offsets, rect, t, sx, sy, offsetX, offsetY, parentRect, borderTop, borderLeft, borderTranslateX, borderTranslateY; m = (cache.isSVG && (e.style[_transformProp] + "").indexOf("matrix") !== -1) ? e.style[_transformProp] : cs ? cs.getPropertyValue(_transformPropCSS) : e.currentStyle ? e.currentStyle[_transformProp] : "1,0,0,1,0,0"; //some browsers (like Chrome 40) don't correctly report transforms that are applied inline on an SVG element (they don't get included in the computed style), so we double-check here and accept matrix values if (e.getBBox && (e.getAttribute("transform") + "").indexOf("matrix") !== -1) { //SVG can store transform data in its "transform" attribute instead of the CSS, so look for that here (only accept matrix()). m = e.getAttribute("transform"); } m = (m + "").match(/(?:\-|\.|\b)(\d|\.|e\-)+/g) || [1,0,0,1,0,0]; if (m.length > 6) { m = [m[0], m[1], m[4], m[5], m[12], m[13]]; } if (zeroOrigin) { m[4] = m[5] = 0; } else if (cache.isSVG && (t = e._gsTransform) && (t.xOrigin || t.yOrigin)) { //SVGs handle origin very differently. Factor in GSAP's handling of origin values here: m[0] = parseFloat(m[0]); m[1] = parseFloat(m[1]); m[2] = parseFloat(m[2]); m[3] = parseFloat(m[3]); m[4] = parseFloat(m[4]) - (t.xOrigin - (t.xOrigin * m[0] + t.yOrigin * m[2])); m[5] = parseFloat(m[5]) - (t.yOrigin - (t.xOrigin * m[1] + t.yOrigin * m[3])); } if (offsetOrigin) { if (_svgBorderFactor === undefined) { _setEnvironmentVariables(); } offsets = (cache.isSVG || cache.isSVGRoot) ? _getSVGOffsets(e) : e; if (cache.isSVG) { //don't just rely on "instanceof _SVGElement" because if the SVG is embedded via an object tag, it won't work (SVGElement is mapped to a different object)) rect = e.getBBox(); parentRect = (parentCache.isSVGRoot) ? {x:0, y:0} : parent.getBBox(); offsets = {offsetLeft:rect.x - parentRect.x, offsetTop:rect.y - parentRect.y, offsetParent:cache.offsetParent}; } else if (cache.isSVGRoot) { borderTop = parseInt(cs.borderTopWidth, 10) || 0; borderLeft = parseInt(cs.borderLeftWidth, 10) || 0; borderTranslateX = ((m[0] - _svgBorderFactor) * borderLeft + m[2] * borderTop); borderTranslateY = (m[1] * borderLeft + (m[3] - _svgBorderFactor) * borderTop); sx = offsetOrigin.x; sy = offsetOrigin.y; offsetX = (sx - (sx * m[0] + sy * m[2])); //accommodate the SVG root's transforms when the origin isn't in the top left. offsetY = (sy - (sx * m[1] + sy * m[3])); m[4] = parseFloat(m[4]) + offsetX; m[5] = parseFloat(m[5]) + offsetY; offsetOrigin.x -= offsetX; offsetOrigin.y -= offsetY; sx = offsets.scaleX; sy = offsets.scaleY; offsetOrigin.x *= sx; offsetOrigin.y *= sy; m[0] *= sx; m[1] *= sy; m[2] *= sx; m[3] *= sy; if (!_isIE10orBelow) { offsetOrigin.x += borderTranslateX; offsetOrigin.y += borderTranslateY; } } else if (!_hasBorderBug && e.offsetParent) { offsetOrigin.x += parseInt(_getStyle(e.offsetParent, "borderLeftWidth"), 10) || 0; offsetOrigin.y += parseInt(_getStyle(e.offsetParent, "borderTopWidth"), 10) || 0; } isRoot = (parent === _docElement || parent === _doc.body); m[4] = Number(m[4]) + offsetOrigin.x + (offsets.offsetLeft || 0) - parentOffsetOrigin.x - (isRoot ? 0 : parent.scrollLeft || 0); m[5] = Number(m[5]) + offsetOrigin.y + (offsets.offsetTop || 0) - parentOffsetOrigin.y - (isRoot ? 0 : parent.scrollTop || 0); if (parent && _getStyle(e, "position", cs) === "fixed") { //fixed position elements should factor in the scroll position of the document. m[4] += _getDocScrollLeft(); m[5] += _getDocScrollTop(); } if (parent && parent !== _docElement && parentOffsetParent === offsets.offsetParent && !parentCache.isSVG && (!_hasReparentBug || _getOffset2DMatrix(parent).join("") === "100100")) { offsets = (parentCache.isSVGRoot) ? _getSVGOffsets(parent) : parent; m[4] -= offsets.offsetLeft || 0; m[5] -= offsets.offsetTop || 0; if (!_hasBorderBug && parentCache.offsetParent && !cache.isSVG && !cache.isSVGRoot) { m[4] -= parseInt(_getStyle(parentCache.offsetParent, "borderLeftWidth"), 10) || 0; m[5] -= parseInt(_getStyle(parentCache.offsetParent, "borderTopWidth"), 10) || 0; } } } return m; }, _getConcatenatedMatrix = function(e, invert) { if (!e || e === window || !e.parentNode) { return [1,0,0,1,0,0]; } //note: we keep reusing _point1 and _point2 in order to minimize memory usage and garbage collection chores. var originOffset = _getOffsetTransformOrigin(e, _point1), parentOriginOffset = _getOffsetTransformOrigin(e.parentNode, _point2), m = _getOffset2DMatrix(e, originOffset, parentOriginOffset), a, b, c, d, tx, ty, m2, determinant; while ((e = e.parentNode) && e.parentNode && e !== _docElement) { originOffset = parentOriginOffset; parentOriginOffset = _getOffsetTransformOrigin(e.parentNode, (originOffset === _point1) ? _point2 : _point1); m2 = _getOffset2DMatrix(e, originOffset, parentOriginOffset); a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; m[0] = a * m2[0] + b * m2[2]; m[1] = a * m2[1] + b * m2[3]; m[2] = c * m2[0] + d * m2[2]; m[3] = c * m2[1] + d * m2[3]; m[4] = tx * m2[0] + ty * m2[2] + m2[4]; m[5] = tx * m2[1] + ty * m2[3] + m2[5]; } if (invert) { a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; determinant = (a * d - b * c); m[0] = d / determinant; m[1] = -b / determinant; m[2] = -c / determinant; m[3] = a / determinant; m[4] = (c * ty - d * tx) / determinant; m[5] = -(a * ty - b * tx) / determinant; } return m; }, _localToGlobal = function(e, p, fromTopLeft, decoratee, zeroOrigin) { e = _unwrapElement(e); var m = _getConcatenatedMatrix(e, false, zeroOrigin), x = p.x, y = p.y; if (fromTopLeft) { _getOffsetTransformOrigin(e, p); x -= p.x; y -= p.y; } decoratee = (decoratee === true) ? p : decoratee || {}; decoratee.x = x * m[0] + y * m[2] + m[4]; decoratee.y = x * m[1] + y * m[3] + m[5]; return decoratee; }, _localizePoint = function(p, localToGlobal, globalToLocal) { var x = p.x * localToGlobal[0] + p.y * localToGlobal[2] + localToGlobal[4], y = p.x * localToGlobal[1] + p.y * localToGlobal[3] + localToGlobal[5]; p.x = x * globalToLocal[0] + y * globalToLocal[2] + globalToLocal[4]; p.y = x * globalToLocal[1] + y * globalToLocal[3] + globalToLocal[5]; return p; }, _getElementBounds = function(e, context, fromTopLeft) { if (!(e = _unwrapElement(e))) { return null; } context = _unwrapElement(context); var isSVG = (e.getBBox && _isSVG(e)), origin, left, right, top, bottom, mLocalToGlobal, mGlobalToLocal, p1, p2, p3, p4, bbox, width, height, cache, borderLeft, borderTop, viewBox, viewBoxX, viewBoxY, computedDimensions, cs; if (e === window) { top = _getDocScrollTop(); left = _getDocScrollLeft(); right = left + (_docElement.clientWidth || e.innerWidth || _doc.body.clientWidth || 0); bottom = top + (((e.innerHeight || 0) - 20 < _docElement.clientHeight) ? _docElement.clientHeight : e.innerHeight || _doc.body.clientHeight || 0); //some browsers (like Firefox) ignore absolutely positioned elements, and collapse the height of the documentElement, so it could be 8px, for example, if you have just an absolutely positioned div. In that case, we use the innerHeight to resolve this. } else if (context === undefined || context === window) { return e.getBoundingClientRect(); } else { origin = _getOffsetTransformOrigin(e); left = -origin.x; top = -origin.y; if (isSVG) { bbox = e.getBBox(); width = bbox.width; height = bbox.height; } else if ((e.nodeName + "").toLowerCase() !== "svg" && e.offsetWidth) { //Chrome dropped support for "offsetWidth" on SVG elements width = e.offsetWidth; height = e.offsetHeight; } else { computedDimensions = _getComputedStyle(e); width = parseFloat(computedDimensions.width); height = parseFloat(computedDimensions.height); } right = left + width; bottom = top + height; if (e.nodeName.toLowerCase() === "svg" && !_isOldIE) { //root SVG elements are a special beast because they have 2 types of scaling - transforms on themselves as well as the stretching of the SVG canvas itself based on the outer size and the viewBox. If, for example, the SVG's viewbox is "0 0 100 100" but the CSS is set to width:200px; height:200px, that'd make it appear at 2x scale even though the element itself has no CSS transforms but the offsetWidth/offsetHeight are based on that css, not the viewBox so we need to adjust them accordingly. cache = _getSVGOffsets(e); cs = cache.computedStyle || {}; viewBox = (e.getAttribute("viewBox") || "0 0").split(" "); viewBoxX = parseFloat(viewBox[0]); viewBoxY = parseFloat(viewBox[1]); borderLeft = parseFloat(cs.borderLeftWidth) || 0; borderTop = parseFloat(cs.borderTopWidth) || 0; right -= width - ((width - borderLeft) / cache.scaleX) - viewBoxX; bottom -= height - ((height - borderTop) / cache.scaleY) - viewBoxY; left -= borderLeft / cache.scaleX - viewBoxX; top -= borderTop / cache.scaleY - viewBoxY; if (computedDimensions) { //when we had to use computed styles, factor in the border now. right += (parseFloat(cs.borderRightWidth) + borderLeft) / cache.scaleX; bottom += (borderTop + parseFloat(cs.borderBottomWidth)) / cache.scaleY; } } } if (e === context) { return {left:left, top:top, width: right - left, height: bottom - top}; } mLocalToGlobal = _getConcatenatedMatrix(e); mGlobalToLocal = _getConcatenatedMatrix(context, true); p1 = _localizePoint({x:left, y:top}, mLocalToGlobal, mGlobalToLocal); p2 = _localizePoint({x:right, y:top}, mLocalToGlobal, mGlobalToLocal); p3 = _localizePoint({x:right, y:bottom}, mLocalToGlobal, mGlobalToLocal); p4 = _localizePoint({x:left, y:bottom}, mLocalToGlobal, mGlobalToLocal); left = Math.min(p1.x, p2.x, p3.x, p4.x); top = Math.min(p1.y, p2.y, p3.y, p4.y); _temp1.x = _temp1.y = 0; if (fromTopLeft) { _getOffsetTransformOrigin(context, _temp1); } return {left:left + _temp1.x, top:top + _temp1.y, width:Math.max(p1.x, p2.x, p3.x, p4.x) - left, height:Math.max(p1.y, p2.y, p3.y, p4.y) - top}; }, // end matrix and point conversion methods _isArrayLike = function(e) { return (e && e.length && e[0] && ((e[0].nodeType && e[0].style && !e.nodeType) || (e[0].length && e[0][0]))) ? true : false; //could be an array of jQuery objects too, so accommodate that. }, _flattenArray = function(a) { var result = [], l = a.length, i, e, j; for (i = 0; i < l; i++) { e = a[i]; if (_isArrayLike(e)) { j = e.length; for (j = 0; j < e.length; j++) { result.push(e[j]); } } else if (e && e.length !== 0) { result.push(e); } } return result; }, _isTouchDevice = (("ontouchstart" in _docElement) && ("orientation" in window)), _touchEventLookup = (function(types) { //we create an object that makes it easy to translate touch event types into their "pointer" counterparts if we're in a browser that uses those instead. Like IE10 uses "MSPointerDown" instead of "touchstart", for example. var standard = types.split(","), converted = ((_tempDiv.onpointerdown !== undefined) ? "pointerdown,pointermove,pointerup,pointercancel" : (_tempDiv.onmspointerdown !== undefined) ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : types).split(","), obj = {}, i = 8; while (--i > -1) { obj[standard[i]] = converted[i]; obj[converted[i]] = standard[i]; } return obj; }("touchstart,touchmove,touchend,touchcancel")), _addListener = function(element, type, func, capture) { if (element.addEventListener) { element.addEventListener(_touchEventLookup[type] || type, func, capture); } else if (element.attachEvent) { element.attachEvent("on" + type, func); } }, _removeListener = function(element, type, func) { if (element.removeEventListener) { element.removeEventListener(_touchEventLookup[type] || type, func); } else if (element.detachEvent) { element.detachEvent("on" + type, func); } }, _hasTouchID = function(list, ID) { var i = list.length; while (--i > -1) { if (list[i].identifier === ID) { return true; } } return false; }, _onMultiTouchDocumentEnd = function(e) { _isMultiTouching = (e.touches && _dragCount < e.touches.length); _removeListener(e.target, "touchend", _onMultiTouchDocumentEnd); }, _onMultiTouchDocument = function(e) { _isMultiTouching = (e.touches && _dragCount < e.touches.length); _addListener(e.target, "touchend", _onMultiTouchDocumentEnd); }, _parseThrowProps = function(draggable, snap, max, min, factor, forceZeroVelocity) { var vars = {}, a, i, l; if (snap) { if (factor !== 1 && snap instanceof Array) { //some data must be altered to make sense, like if the user passes in an array of rotational values in degrees, we must convert it to radians. Or for scrollLeft and scrollTop, we invert the values. vars.end = a = []; l = snap.length; if (typeof(snap[0]) === "object") { //if the array is populated with objects, like points ({x:100, y:200}), make copies before multiplying by the factor, otherwise we'll mess up the originals and the user may reuse it elsewhere. for (i = 0; i < l; i++) { a[i] = _copy(snap[i], factor); } } else { for (i = 0; i < l; i++) { a[i] = snap[i] * factor; } } max += 1.1; //allow 1.1 pixels of wiggle room when snapping in order to work around some browser inconsistencies in the way bounds are reported which can make them roughly a pixel off. For example, if "snap:[-$('#menu').width(), 0]" was defined and #menu had a wrapper that was used as the bounds, some browsers would be one pixel off, making the minimum -752 for example when snap was [-753,0], thus instead of snapping to -753, it would snap to 0 since -753 was below the minimum. min -= 1.1; } else if (typeof(snap) === "function") { vars.end = function(value) { var result = snap.call(draggable, value), copy, p; if (factor !== 1 && typeof(result) === "object") { copy = {}; for (p in result) { copy[p] = result[p] * factor; } result = copy; } return result; //we need to ensure that we can scope the function call to the Draggable instance itself so that users can access important values like maxX, minX, maxY, minY, x, and y from within that function. }; } else { vars.end = snap; } } if (max || max === 0) { vars.max = max; } if (min || min === 0) { vars.min = min; } if (forceZeroVelocity) { vars.velocity = 0; } return vars; }, _isClickable = function(e) { //sometimes it's convenient to mark an element as clickable by adding a data-clickable="true" attribute (in which case we won't preventDefault() the mouse/touch event). This method checks if the element is an <a>, <input>, or <button> or has an onclick or has the data-clickable or contentEditable attribute set to true (or any of its parent elements). var data; return (!e || !e.getAttribute || e.nodeName === "BODY") ? false : ((data = e.getAttribute("data-clickable")) === "true" || (data !== "false" && (e.onclick || _clickableTagExp.test(e.nodeName + "") || e.getAttribute("contentEditable") === "true"))) ? true : _isClickable(e.parentNode); }, _setSelectable = function(elements, selectable) { var i = elements.length, e; while (--i > -1) { e = elements[i]; e.ondragstart = e.onselectstart = selectable ? null : _emptyFunc; _setStyle(e, "userSelect", (selectable ? "text" : "none")); } }, _addPaddingBR, _addPaddingLeft = (function() { //this function is in charge of analyzing browser behavior related to padding. It sets the _addPaddingBR to true if the browser doesn't normally factor in the bottom or right padding on the element inside the scrolling area, and it sets _addPaddingLeft to true if it's a browser that requires the extra offset (offsetLeft) to be added to the paddingRight (like Opera). var div = _doc.createElement("div"), child = _doc.createElement("div"), childStyle = child.style, parent = _doc.body || _tempDiv, val; childStyle.display = "inline-block"; childStyle.position = "relative"; div.style.cssText = child.innerHTML = "width:90px; height:40px; padding:10px; overflow:auto; visibility: hidden"; div.appendChild(child); parent.appendChild(div); _addPaddingBR = (child.offsetHeight + 18 > div.scrollHeight); //div.scrollHeight should be child.offsetHeight + 20 because of the 10px of padding on each side, but some browsers ignore one side. We allow a 2px margin of error. childStyle.width = "100%"; if (!_transformProp) { childStyle.paddingRight = "500px"; val = div.scrollLeft = div.scrollWidth - div.clientWidth; childStyle.left = "-90px"; val = (val !== div.scrollLeft); } parent.removeChild(div); return val; }()), //The ScrollProxy class wraps an element's contents into another div (we call it "content") that we either add padding when necessary or apply a translate3d() transform in order to overscroll (scroll past the boundaries). This allows us to simply set the scrollTop/scrollLeft (or top/left for easier reverse-axis orientation, which is what we do in Draggable) and it'll do all the work for us. For example, if we tried setting scrollTop to -100 on a normal DOM element, it wouldn't work - it'd look the same as setting it to 0, but if we set scrollTop of a ScrollProxy to -100, it'll give the correct appearance by either setting paddingTop of the wrapper to 100 or applying a 100-pixel translateY. ScrollProxy = function(element, vars) { element = _unwrapElement(element); vars = vars || {}; var content = _doc.createElement("div"), style = content.style, node = element.firstChild, offsetTop = 0, offsetLeft = 0, prevTop = element.scrollTop, prevLeft = element.scrollLeft, scrollWidth = element.scrollWidth, scrollHeight = element.scrollHeight, extraPadRight = 0, maxLeft = 0, maxTop = 0, elementWidth, elementHeight, contentHeight, nextNode, transformStart, transformEnd; if (_supports3D && vars.force3D !== false) { transformStart = "translate3d("; transformEnd = "px,0px)"; } else if (_transformProp) { transformStart = "translate("; transformEnd = "px)"; } this.scrollTop = function(value, force) { if (!arguments.length) { return -this.top(); } this.top(-value, force); }; this.scrollLeft = function(value, force) { if (!arguments.length) { return -this.left(); } this.left(-value, force); }; this.left = function(value, force) { if (!arguments.length) { return -(element.scrollLeft + offsetLeft); } var dif = element.scrollLeft - prevLeft, oldOffset = offsetLeft; if ((dif > 2 || dif < -2) && !force) { //if the user interacts with the scrollbar (or something else scrolls it, like the mouse wheel), we should kill any tweens of the ScrollProxy. prevLeft = element.scrollLeft; TweenLite.killTweensOf(this, true, {left:1, scrollLeft:1}); this.left(-prevLeft); if (vars.onKill) { vars.onKill(); } return; } value = -value; //invert because scrolling works in the opposite direction if (value < 0) { offsetLeft = (value - 0.5) | 0; value = 0; } else if (value > maxLeft) { offsetLeft = (value - maxLeft) | 0; value = maxLeft; } else { offsetLeft = 0; } if (offsetLeft || oldOffset) { if (transformStart) { if (!this._suspendTransforms) { style[_transformProp] = transformStart + -offsetLeft + "px," + -offsetTop + transformEnd; } } else { style.left = -offsetLeft + "px"; } if (_addPaddingLeft && offsetLeft + extraPadRight >= 0) { style.paddingRight = offsetLeft + extraPadRight + "px"; } } element.scrollLeft = value | 0; prevLeft = element.scrollLeft; //don't merge this with the line above because some browsers adjsut the scrollLeft after it's set, so in order to be 100% accurate in tracking it, we need to ask the browser to report it. }; this.top = function(value, force) { if (!arguments.length) { return -(element.scrollTop + offsetTop); } var dif = element.scrollTop - prevTop, oldOffset = offsetTop; if ((dif > 2 || dif < -2) && !force) { //if the user interacts with the scrollbar (or something else scrolls it, like the mouse wheel), we should kill any tweens of the ScrollProxy. prevTop = element.scrollTop; TweenLite.killTweensOf(this, true, {top:1, scrollTop:1}); this.top(-prevTop); if (vars.onKill) { vars.onKill(); } return; } value = -value; //invert because scrolling works in the opposite direction if (value < 0) { offsetTop = (value - 0.5) | 0; value = 0; } else if (value > maxTop) { offsetTop = (value - maxTop) | 0; value = maxTop; } else { offsetTop = 0; } if (offsetTop || oldOffset) { if (transformStart) { if (!this._suspendTransforms) { style[_transformProp] = transformStart + -offsetLeft + "px," + -offsetTop + transformEnd; } } else { style.top = -offsetTop + "px"; } } element.scrollTop = value | 0; prevTop = element.scrollTop; }; this.maxScrollTop = function() { return maxTop; }; this.maxScrollLeft = function() { return maxLeft; }; this.disable = function() { node = content.firstChild; while (node) { nextNode = node.nextSibling; element.appendChild(node); node = nextNode; } if (element === content.parentNode) { //in case disable() is called when it's already disabled. element.removeChild(content); } }; this.enable = function() { node = element.firstChild; if (node === content) { return; } while (node) { nextNode = node.nextSibling; content.appendChild(node); node = nextNode; } element.appendChild(content); this.calibrate(); }; this.calibrate = function(force) { var widthMatches = (element.clientWidth === elementWidth), x, y; prevTop = element.scrollTop; prevLeft = element.scrollLeft; if (widthMatches && element.clientHeight === elementHeight && content.offsetHeight === contentHeight && scrollWidth === element.scrollWidth && scrollHeight === element.scrollHeight && !force) { return; //no need to recalculate things if the width and height haven't changed. } if (offsetTop || offsetLeft) { x = this.left(); y = this.top(); this.left(-element.scrollLeft); this.top(-element.scrollTop); } //first, we need to remove any width constraints to see how the content naturally flows so that we can see if it's wider than the containing element. If so, we've got to record the amount of overage so that we can apply that as padding in order for browsers to correctly handle things. Then we switch back to a width of 100% (without that, some browsers don't flow the content correctly) if (!widthMatches || force) { style.display = "block"; style.width = "auto"; style.paddingRight = "0px"; extraPadRight = Math.max(0, element.scrollWidth - element.clientWidth); //if the content is wider than the container, we need to add the paddingLeft and paddingRight in order for things to behave correctly. if (extraPadRight) { extraPadRight += _getStyle(element, "paddingLeft") + (_addPaddingBR ? _getStyle(element, "paddingRight") : 0); } } style.display = "inline-block"; style.position = "relative"; style.overflow = "visible"; style.verticalAlign = "top"; style.width = "100%"; style.paddingRight = extraPadRight + "px"; //some browsers neglect to factor in the bottom padding when calculating the scrollHeight, so we need to add that padding to the content when that happens. Allow a 2px margin for error if (_addPaddingBR) { style.paddingBottom = _getStyle(element, "paddingBottom", true); } if (_isOldIE) { style.zoom = "1"; } elementWidth = element.clientWidth; elementHeight = element.clientHeight; scrollWidth = element.scrollWidth; scrollHeight = element.scrollHeight; maxLeft = element.scrollWidth - elementWidth; maxTop = element.scrollHeight - elementHeight; contentHeight = content.offsetHeight; style.display = "block"; if (x || y) { this.left(x); this.top(y); } }; this.content = content; this.element = element; this._suspendTransforms = false; this.enable(); }, Draggable = function(target, vars) { EventDispatcher.call(this, target); target = _unwrapElement(target); //in case the target is a selector object or selector text if (!ThrowPropsPlugin) { ThrowPropsPlugin = _globals.com.greensock.plugins.ThrowPropsPlugin; } this.vars = vars = _copy(vars || {}); this.target = target; this.x = this.y = this.rotation = 0; this.dragResistance = parseFloat(vars.dragResistance) || 0; this.edgeResistance = isNaN(vars.edgeResistance) ? 1 : parseFloat(vars.edgeResistance) || 0; this.lockAxis = vars.lockAxis; this.autoScroll = vars.autoScroll || 0; this.lockedAxis = null; this.allowEventDefault = !!vars.allowEventDefault; var type = (vars.type || (_isOldIE ? "top,left" : "x,y")).toLowerCase(), xyMode = (type.indexOf("x") !== -1 || type.indexOf("y") !== -1), rotationMode = (type.indexOf("rotation") !== -1), xProp = rotationMode ? "rotation" : xyMode ? "x" : "left", yProp = xyMode ? "y" : "top", allowX = (type.indexOf("x") !== -1 || type.indexOf("left") !== -1 || type === "scroll"), allowY = (type.indexOf("y") !== -1 || type.indexOf("top") !== -1 || type === "scroll"), minimumMovement = vars.minimumMovement || 2, self = this, triggers = _slice(vars.trigger || vars.handle || target), killProps = {}, dragEndTime = 0, checkAutoScrollBounds = false, isClickable = vars.clickableTest || _isClickable, clickTime = 0, enabled, scrollProxy, startPointerX, startPointerY, startElementX, startElementY, hasBounds, hasDragCallback, maxX, minX, maxY, minY, tempVars, cssVars, touch, touchID, rotationOrigin, dirty, old, snapX, snapY, snapXY, isClicking, touchEventTarget, matrix, interrupted, startScrollTop, startScrollLeft, applyObj, allowNativeTouchScrolling, touchDragAxis, isDispatching, clickDispatch, trustedClickDispatch, //this method gets called on every tick of TweenLite.ticker which allows us to synchronize the renders to the core engine (which is typically synchronized with the display refresh via requestAnimationFrame). This is an optimization - it's better than applying the values inside the "mousemove" or "touchmove" event handler which may get called many times inbetween refreshes. render = function(suppressEvents) { if (self.autoScroll && self.isDragging && (checkAutoScrollBounds || dirty)) { var e = target, autoScrollFactor = self.autoScroll * 15, //multiplying by 15 just gives us a better "feel" speed-wise. parent, isRoot, rect, pointerX, pointerY, changeX, changeY, gap; checkAutoScrollBounds = false; _windowProxy.scrollTop = ((window.pageYOffset != null) ? window.pageYOffset : (_docElement.scrollTop != null) ? _docElement.scrollTop : _doc.body.scrollTop); _windowProxy.scrollLeft = ((window.pageXOffset != null) ? window.pageXOffset : (_docElement.scrollLeft != null) ? _docElement.scrollLeft : _doc.body.scrollLeft); pointerX = self.pointerX - _windowProxy.scrollLeft; pointerY = self.pointerY - _windowProxy.scrollTop; while (e && !isRoot) { //walk up the chain and sense wherever the pointer is within 40px of an edge that's scrollable. isRoot = _isRoot(e.parentNode); parent = isRoot ? _windowProxy : e.parentNode; rect = isRoot ? {bottom:Math.max(_docElement.clientHeight, window.innerHeight || 0), right: Math.max(_docElement.clientWidth, window.innerWidth || 0), left:0, top:0} : parent.getBoundingClientRect(); changeX = changeY = 0; if (allowY) { gap = parent._gsMaxScrollY - parent.scrollTop; if (gap < 0) { changeY = gap; } else if (pointerY > rect.bottom - 40 && gap) { checkAutoScrollBounds = true; changeY = Math.min(gap, (autoScrollFactor * (1 - Math.max(0, (rect.bottom - pointerY)) / 40)) | 0); } else if (pointerY < rect.top + 40 && parent.scrollTop) { checkAutoScrollBounds = true; changeY = -Math.min(parent.scrollTop, (autoScrollFactor * (1 - Math.max(0, (pointerY - rect.top)) / 40)) | 0); } if (changeY) { parent.scrollTop += changeY; } } if (allowX) { gap = parent._gsMaxScrollX - parent.scrollLeft; if (gap < 0) { changeX = gap; } else if (pointerX > rect.right - 40 && gap) { checkAutoScrollBounds = true; changeX = Math.min(gap, (autoScrollFactor * (1 - Math.max(0, (rect.right - pointerX)) / 40)) | 0); } else if (pointerX < rect.left + 40 && parent.scrollLeft) { checkAutoScrollBounds = true; changeX = -Math.min(parent.scrollLeft, (autoScrollFactor * (1 - Math.max(0, (pointerX - rect.left)) / 40)) | 0); } if (changeX) { parent.scrollLeft += changeX; } } if (isRoot && (changeX || changeY)) { window.scrollTo(parent.scrollLeft, parent.scrollTop); setPointerPosition(self.pointerX + changeX, self.pointerY + changeY); } e = parent; } } if (dirty) { var x = self.x, y = self.y, min = 0.000001; if (x < min && x > -min) { //browsers don't handle super small decimals well. x = 0; } if (y < min && y > -min) { y = 0; } if (rotationMode) { self.deltaX = x - applyObj.data.rotation; applyObj.data.rotation = self.rotation = x; applyObj.setRatio(1); //note: instead of doing TweenLite.set(), as a performance optimization we skip right to the method that renders the transforms inside CSSPlugin. For old versions of IE, though, we do a normal TweenLite.set() to leverage its ability to re-reroute to an IE-specific 2D renderer. } else { if (scrollProxy) { if (allowY) { self.deltaY = y - scrollProxy.top(); scrollProxy.top(y); } if (allowX) { self.deltaX = x - scrollProxy.left(); scrollProxy.left(x); } } else if (xyMode) { if (allowY) { self.deltaY = y - applyObj.data.y; applyObj.data.y = y; } if (allowX) { self.deltaX = x - applyObj.data.x; applyObj.data.x = x; } applyObj.setRatio(1); //note: instead of doing TweenLite.set(), as a performance optimization we skip right to the method that renders the transforms inside CSSPlugin. For old versions of IE, though, we do a normal TweenLite.set() to leverage its ability to re-reroute to an IE-specific 2D renderer. } else { if (allowY) { self.deltaY = y - parseFloat(target.style.top || 0); target.style.top = y + "px"; } if (allowX) { self.deltaY = x - parseFloat(target.style.left || 0); target.style.left = x + "px"; } } } if (hasDragCallback && !suppressEvents && !isDispatching) { isDispatching = true; //in case onDrag has an update() call (avoid endless loop) _dispatchEvent(self, "drag", "onDrag"); isDispatching = false; } } dirty = false; }, //copies the x/y from the element (whether that be transforms, top/left, or ScrollProxy's top/left) to the Draggable's x and y (and rotation if necessary) properties so that they reflect reality and it also (optionally) applies any snapping necessary. This is used by the ThrowPropsPlugin tween in an onUpdate to ensure things are synced and snapped. syncXY = function(skipOnUpdate, skipSnap) { var x = self.x, y = self.y, snappedValue; if (!target._gsTransform && (xyMode || rotationMode)) { //just in case the _gsTransform got wiped, like if the user called clearProps on the transform or something (very rare), doing an x tween forces a re-parsing of the transforms and population of the _gsTransform. TweenLite.set(target, {x:"+=0", overwrite:false}); } if (xyMode) { self.y = target._gsTransform.y; self.x = target._gsTransform.x; } else if (rotationMode) { self.x = self.rotation = target._gsTransform.rotation; } else if (scrollProxy) { self.y = scrollProxy.top(); self.x = scrollProxy.left(); } else { self.y = parseInt(target.style.top, 10) || 0; self.x = parseInt(target.style.left, 10) || 0; } if ((snapX || snapY || snapXY) && !skipSnap && (self.isDragging || self.isThrowing)) { if (snapXY) { _temp1.x = self.x; _temp1.y = self.y; snappedValue = snapXY(_temp1); if (snappedValue.x !== self.x) { self.x = snappedValue.x; dirty = true; } if (snappedValue.y !== self.y) { self.y = snappedValue.y; dirty = true; } } if (snapX) { snappedValue = snapX(self.x); if (snappedValue !== self.x) { self.x = snappedValue; if (rotationMode) { self.rotation = snappedValue; } dirty = true; } } if (snapY) { snappedValue = snapY(self.y); if (snappedValue !== self.y) { self.y = snappedValue; } dirty = true; } } if (dirty) { render(true); } if (!skipOnUpdate) { self.deltaX = self.x - x; self.deltaY = self.y - y; _dispatchEvent(self, "throwupdate", "onThrowUpdate"); } }, calculateBounds = function() { var bounds, targetBounds, snap, snapIsRaw; hasBounds = false; if (scrollProxy) { scrollProxy.calibrate(); self.minX = minX = -scrollProxy.maxScrollLeft(); self.minY = minY = -scrollProxy.maxScrollTop(); self.maxX = maxX = self.maxY = maxY = 0; hasBounds = true; } else if (!!vars.bounds) { bounds = _getBounds(vars.bounds, target.parentNode); //could be a selector/jQuery object or a DOM element or a generic object like {top:0, left:100, width:1000, height:800} or {minX:100, maxX:1100, minY:0, maxY:800} if (rotationMode) { self.minX = minX = bounds.left; self.maxX = maxX = bounds.left + bounds.width; self.minY = minY = self.maxY = maxY = 0; } else if (vars.bounds.maxX !== undefined || vars.bounds.maxY !== undefined) { bounds = vars.bounds; self.minX = minX = bounds.minX; self.minY = minY = bounds.minY; self.maxX = maxX = bounds.maxX; self.maxY = maxY = bounds.maxY; } else { targetBounds = _getBounds(target, target.parentNode); self.minX = minX = _getStyle(target, xProp) + bounds.left - targetBounds.left; self.minY = minY = _getStyle(target, yProp) + bounds.top - targetBounds.top; self.maxX = maxX = minX + (bounds.width - targetBounds.width); self.maxY = maxY = minY + (bounds.height - targetBounds.height); } if (minX > maxX) { self.minX = maxX; self.maxX = maxX = minX; minX = self.minX; } if (minY > maxY) { self.minY = maxY; self.maxY = maxY = minY; minY = self.minY; } if (rotationMode) { self.minRotation = minX; self.maxRotation = maxX; } hasBounds = true; } if (vars.liveSnap) { snap = (vars.liveSnap === true) ? (vars.snap || {}) : vars.liveSnap; snapIsRaw = (snap instanceof Array || typeof(snap) === "function"); if (rotationMode) { snapX = buildSnapFunc((snapIsRaw ? snap : snap.rotation), minX, maxX, 1); snapY = null; } else { if (snap.points) { snapXY = buildPointSnapFunc((snapIsRaw ? snap : snap.points), minX, maxX, minY, maxY, snap.radius, scrollProxy ? -1 : 1); } else { if (allowX) { snapX = buildSnapFunc((snapIsRaw ? snap : snap.x || snap.left || snap.scrollLeft), minX, maxX, scrollProxy ? -1 : 1); } if (allowY) { snapY = buildSnapFunc((snapIsRaw ? snap : snap.y || snap.top || snap.scrollTop), minY, maxY, scrollProxy ? -1 : 1); } } } } }, onThrowComplete = function() { self.isThrowing = false; _dispatchEvent(self, "throwcomplete", "onThrowComplete"); }, onThrowOverwrite = function() { self.isThrowing = false; }, animate = function(throwProps, forceZeroVelocity) { var snap, snapIsRaw, tween, overshootTolerance; if (throwProps && ThrowPropsPlugin) { if (throwProps === true) { snap = vars.snap || vars.liveSnap || {}; snapIsRaw = (snap instanceof Array || typeof(snap) === "function"); throwProps = {resistance:(vars.throwResistance || vars.resistance || 1000) / (rotationMode ? 10 : 1)}; if (rotationMode) { throwProps.rotation = _parseThrowProps(self, snapIsRaw ? snap : snap.rotation, maxX, minX, 1, forceZeroVelocity); } else { if (allowX) { throwProps[xProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.points || snap.x || snap.left || snap.scrollLeft, maxX, minX, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockedAxis === "x")); } if (allowY) { throwProps[yProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.points || snap.y || snap.top || snap.scrollTop, maxY, minY, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockedAxis === "y")); } if (snap.points || (snap instanceof Array && typeof(snap[0]) === "object")) { throwProps.linkedProps = xProp + "," + yProp; throwProps.radius = snap.radius; //note: we also disable liveSnapping while throwing if there's a "radius" defined, otherwise it looks weird to have the item thrown past a snapping point but live-snapping mid-tween. We do this by altering the onUpdateParams so that "skipSnap" parameter is true for syncXY. } } } self.isThrowing = true; overshootTolerance = (!isNaN(vars.overshootTolerance)) ? vars.overshootTolerance : (vars.edgeResistance === 1) ? 0 : (1 - self.edgeResistance) + 0.2; self.tween = tween = ThrowPropsPlugin.to(scrollProxy || target, {throwProps:throwProps, ease:(vars.ease || _globals.Power3.easeOut), onComplete:onThrowComplete, onOverwrite:onThrowOverwrite, onUpdate:(vars.fastMode ? _dispatchEvent : syncXY), onUpdateParams:(vars.fastMode ? [self, "onthrowupdate", "onThrowUpdate"] : (snap && snap.radius) ? [false, true] : _emptyArray)}, (isNaN(vars.maxDuration) ? 2 : vars.maxDuration), (!isNaN(vars.minDuration) ? vars.minDuration : (overshootTolerance === 0) ? 0 : 0.5), overshootTolerance); if (!vars.fastMode) { //to populate the end values, we just scrub the tween to the end, record the values, and then jump back to the beginning. if (scrollProxy) { scrollProxy._suspendTransforms = true; //Microsoft browsers have a bug that causes them to briefly render the position incorrectly (it flashes to the end state when we seek() the tween even though we jump right back to the current position, and this only seems to happen when we're affecting both top and left), so we set a _suspendTransforms flag to prevent it from actually applying the values in the ScrollProxy. } tween.render(tween.duration(), true, true); syncXY(true, true); self.endX = self.x; self.endY = self.y; if (rotationMode) { self.endRotation = self.x; } tween.play(0); syncXY(true, true); if (scrollProxy) { scrollProxy._suspendTransforms = false; } } } else if (hasBounds) { self.applyBounds(); } }, updateMatrix = function(shiftStart) { var start = matrix || [1,0,0,1,0,0], a, b, c, d, tx, ty, determinant, pointerX, pointerY; matrix = _getConcatenatedMatrix(target.parentNode, true); if (shiftStart && self.isPressed && start.join(",") !== matrix.join(",")) { //if the matrix changes WHILE the element is pressed, we must adjust the startPointerX and startPointerY accordingly, so we invert the original matrix and figure out where the pointerX and pointerY were in the global space, then apply the new matrix to get the updated coordinates. a = start[0]; b = start[1]; c = start[2]; d = start[3]; tx = start[4]; ty = start[5]; determinant = (a * d - b * c); pointerX = startPointerX * (d / determinant) + startPointerY * (-c / determinant) + ((c * ty - d * tx) / determinant); pointerY = startPointerX * (-b / determinant) + startPointerY * (a / determinant) + (-(a * ty - b * tx) / determinant); startPointerY = pointerX * matrix[1] + pointerY * matrix[3] + matrix[5]; startPointerX = pointerX * matrix[0] + pointerY * matrix[2] + matrix[4]; } if (!matrix[1] && !matrix[2] && matrix[0] == 1 && matrix[3] == 1 && matrix[4] == 0 && matrix[5] == 0) { //if there are no transforms, we can optimize performance by not factoring in the matrix matrix = null; } }, recordStartPositions = function() { var edgeTolerance = 1 - self.edgeResistance; updateMatrix(false); if (matrix) { startPointerX = self.pointerX * matrix[0] + self.pointerY * matrix[2] + matrix[4]; //translate to local coordinate system startPointerY = self.pointerX * matrix[1] + self.pointerY * matrix[3] + matrix[5]; } if (dirty) { setPointerPosition(self.pointerX, self.pointerY); render(true); } if (scrollProxy) { calculateBounds(); startElementY = scrollProxy.top(); startElementX = scrollProxy.left(); } else { //if the element is in the process of tweening, don't force snapping to occur because it could make it jump. Imagine the user throwing, then before it's done, clicking on the element in its inbetween state. if (isTweening()) { syncXY(true, true); calculateBounds(); } else { self.applyBounds(); } if (rotationMode) { rotationOrigin = _localToGlobal(target, {x:0, y:0}); syncXY(true, true); startElementX = self.x; //starting rotation (x always refers to rotation in type:"rotation", measured in degrees) startElementY = self.y = Math.atan2(rotationOrigin.y - self.pointerY, self.pointerX - rotationOrigin.x) * _RAD2DEG; } else { startScrollTop = target.parentNode ? target.parentNode.scrollTop || 0 : 0; startScrollLeft = target.parentNode ? target.parentNode.scrollLeft || 0 : 0; startElementY = _getStyle(target, yProp); //record the starting top and left values so that we can just add the mouse's movement to them later. startElementX = _getStyle(target, xProp); } } if (hasBounds && edgeTolerance) { if (startElementX > maxX) { startElementX = maxX + (startElementX - maxX) / edgeTolerance; } else if (startElementX < minX) { startElementX = minX - (minX - startElementX) / edgeTolerance; } if (!rotationMode) { if (startElementY > maxY) { startElementY = maxY + (startElementY - maxY) / edgeTolerance; } else if (startElementY < minY) { startElementY = minY - (minY - startElementY) / edgeTolerance; } } } self.startX = startElementX; self.startY = startElementY; }, isTweening = function() { return (self.tween && self.tween.isActive()); }, removePlaceholder = function() { if (_placeholderDiv.parentNode && !isTweening() && !self.isDragging) { //_placeholderDiv just props open auto-scrolling containers so they don't collapse as the user drags left/up. We remove it after dragging (and throwing, if necessary) finishes. _placeholderDiv.parentNode.removeChild(_placeholderDiv); } }, buildSnapFunc = function(snap, min, max, factor) { if (typeof(snap) === "function") { return function(n) { var edgeTolerance = !self.isPressed ? 1 : 1 - self.edgeResistance; //if we're tweening, disable the edgeTolerance because it's already factored into the tweening values (we don't want to apply it multiple times) return snap.call(self, (n > max ? max + (n - max) * edgeTolerance : (n < min) ? min + (n - min) * edgeTolerance : n)) * factor; }; } if (snap instanceof Array) { return function(n) { var i = snap.length, closest = 0, absDif = _max, val, dif; while (--i > -1) { val = snap[i]; dif = val - n; if (dif < 0) { dif = -dif; } if (dif < absDif && val >= min && val <= max) { closest = i; absDif = dif; } } return snap[closest]; }; } return isNaN(snap) ? function(n) { return n; } : function() { return snap * factor; }; }, buildPointSnapFunc = function(snap, minX, maxX, minY, maxY, radius, factor) { radius = radius || _max; if (typeof(snap) === "function") { return function(point) { var edgeTolerance = !self.isPressed ? 1 : 1 - self.edgeResistance, x = point.x, y = point.y, result, dx, dy; //if we're tweening, disable the edgeTolerance because it's already factored into the tweening values (we don't want to apply it multiple times) point.x = x = (x > maxX ? maxX + (x - maxX) * edgeTolerance : (x < minX) ? minX + (x - minX) * edgeTolerance : x); point.y = y = (y > maxY ? maxY + (y - maxY) * edgeTolerance : (y < minY) ? minY + (y - minY) * edgeTolerance : y); result = snap.call(self, point); if (result !== point) { point.x = result.x; point.y = result.y; } if (factor !== 1) { point.x *= factor; point.y *= factor; } if (radius < _max) { dx = point.x - x; dy = point.y - y; if (Math.sqrt(dx * dx + dy * dy) > radius) { point.x = x; point.y = y; } } return point; }; } if (snap instanceof Array) { return function(p) { var i = snap.length, closest = 0, minDist = _max, x, y, point, dist; while (--i > -1) { point = snap[i]; x = point.x - p.x; y = point.y - p.y; dist = Math.sqrt(x * x + y * y); if (dist < minDist) { closest = i; minDist = dist; } } return (minDist <= radius) ? snap[closest] : p; }; } return function(n) { return n; }; }, //called when the mouse is pressed (or touch starts) onPress = function(e) { var i; if (!enabled || self.isPressed || !e || ((e.type === "mousedown" || e.type === "pointerdown") && _getTime() - clickTime < 30 && _touchEventLookup[self.pointerEvent.type])) { //when we DON'T preventDefault() in order to accommodate touch-scrolling and the user just taps, many browsers also fire a mousedown/mouseup sequence AFTER the touchstart/touchend sequence, thus it'd result in two quick "click" events being dispatched. This line senses that condition and halts it on the subsequent mousedown. return; } interrupted = isTweening(); self.pointerEvent = e; if (_touchEventLookup[e.type]) { //note: on iOS, BOTH touchmove and mousemove are dispatched, but the mousemove has pageY and pageX of 0 which would mess up the calculations and needlessly hurt performance. touchEventTarget = (e.type.indexOf("touch") !== -1) ? (e.currentTarget || e.target) : _doc; //pointer-based touches (for Microsoft browsers) don't remain locked to the original target like other browsers, so we must use the document instead. The event type would be "MSPointerDown" or "pointerdown". _addListener(touchEventTarget, "touchend", onRelease); _addListener(touchEventTarget, "touchmove", onMove); _addListener(touchEventTarget, "touchcancel", onRelease); _addListener(_doc, "touchstart", _onMultiTouchDocument); } else { touchEventTarget = null; _addListener(_doc, "mousemove", onMove); //attach these to the document instead of the box itself so that if the user's mouse moves too quickly (and off of the box), things still work. } touchDragAxis = null; _addListener(_doc, "mouseup", onRelease); if (e && e.target) { _addListener(e.target, "mouseup", onRelease); //we also have to listen directly on the element because some browsers don't bubble up the event to the _doc on elements with contentEditable="true" } isClicking = (isClickable.call(self, e.target) && !vars.dragClickables); if (isClicking) { _addListener(e.target, "change", onRelease); //in some browsers, when you mousedown on a <select> element, no mouseup gets dispatched! So we listen for a "change" event instead. _dispatchEvent(self, "press", "onPress"); _setSelectable(triggers, true); //accommodates things like inputs and elements with contentEditable="true" (otherwise user couldn't drag to select text) return; } allowNativeTouchScrolling = (!touchEventTarget || allowX === allowY || self.vars.allowNativeTouchScrolling === false) ? false : allowX ? "y" : "x"; if (_isOldIE) { e = _populateIEEvent(e, true); } else if (!allowNativeTouchScrolling && !self.allowEventDefault) { e.preventDefault(); if (e.preventManipulation) { e.preventManipulation(); //for some Microsoft browsers } } if (e.changedTouches) { //touch events store the data slightly differently e = touch = e.changedTouches[0]; touchID = e.identifier; } else if (e.pointerId) { touchID = e.pointerId; //for some Microsoft browsers } else { touch = touchID = null; } _dragCount++; _addToRenderQueue(render); //causes the Draggable to render on each "tick" of TweenLite.ticker (performance optimization - updating values in a mousemove can cause them to happen too frequently, like multiple times between frame redraws which is wasteful, and it also prevents values from updating properly in IE8) startPointerY = self.pointerY = e.pageY; //record the starting x and y so that we can calculate the movement from the original in _onMouseMove startPointerX = self.pointerX = e.pageX; if (allowNativeTouchScrolling || self.autoScroll) { _recordMaxScrolls(target.parentNode); } if (target.parentNode && (scrollProxy || (self.autoScroll && !rotationMode && target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode)) && !target.getBBox) { //add a placeholder div to prevent the parent container from collapsing when the user drags the element left. _placeholderDiv.style.width = (target.parentNode.scrollWidth) + "px"; target.parentNode.appendChild(_placeholderDiv); } recordStartPositions(); if (self.tween) { self.tween.kill(); } self.isThrowing = false; TweenLite.killTweensOf(scrollProxy || target, true, killProps); //in case the user tries to drag it before the last tween is done. if (scrollProxy) { TweenLite.killTweensOf(target, true, {scrollTo:1}); //just in case the original target's scroll position is being tweened somewhere else. } self.tween = self.lockedAxis = null; if (vars.zIndexBoost || (!rotationMode && !scrollProxy && vars.zIndexBoost !== false)) { target.style.zIndex = Draggable.zIndex++; } self.isPressed = true; hasDragCallback = !!(vars.onDrag || self._listeners.drag); if (!rotationMode) { i = triggers.length; while (--i > -1) { _setStyle(triggers[i], "cursor", vars.cursor || "move"); } } _dispatchEvent(self, "press", "onPress"); }, //called every time the mouse/touch moves onMove = function(e) { var originalEvent = e, touches, pointerX, pointerY, i, dx, dy; if (!enabled || _isMultiTouching || !self.isPressed || !e) { return; } self.pointerEvent = e; touches = e.changedTouches; if (touches) { //touch events store the data slightly differently e = touches[0]; if (e !== touch && e.identifier !== touchID) { //Usually changedTouches[0] will be what we're looking for, but in case it's not, look through the rest of the array...(and Android browsers don't reuse the event like iOS) i = touches.length; while (--i > -1 && (e = touches[i]).identifier !== touchID) {} if (i < 0) { return; } } } else if (e.pointerId && touchID && e.pointerId !== touchID) { //for some Microsoft browsers, we must attach the listener to the doc rather than the trigger so that when the finger moves outside the bounds of the trigger, things still work. So if the event we're receiving has a pointerId that doesn't match the touchID, ignore it (for multi-touch) return; } if (_isOldIE) { e = _populateIEEvent(e, true); } else { if (touchEventTarget && allowNativeTouchScrolling && !touchDragAxis) { //Android browsers force us to decide on the first "touchmove" event if we should allow the default (scrolling) behavior or preventDefault(). Otherwise, a "touchcancel" will be fired and then no "touchmove" or "touchend" will fire during the scrolling (no good). pointerX = e.pageX; pointerY = e.pageY; if (matrix) { i = pointerX * matrix[0] + pointerY * matrix[2] + matrix[4]; pointerY = pointerX * matrix[1] + pointerY * matrix[3] + matrix[5]; pointerX = i; } dx = Math.abs(pointerX - startPointerX); dy = Math.abs(pointerY - startPointerY); if ((dx !== dy && (dx > minimumMovement || dy > minimumMovement)) || (_isAndroid && allowNativeTouchScrolling === touchDragAxis)) { touchDragAxis = (dx > dy && allowX) ? "x" : "y"; if (self.vars.lockAxisOnTouchScroll !== false) { self.lockedAxis = (touchDragAxis === "x") ? "y" : "x"; if (typeof(self.vars.onLockAxis) === "function") { self.vars.onLockAxis.call(self, originalEvent); } } if (_isAndroid && allowNativeTouchScrolling === touchDragAxis) { onRelease(originalEvent); return; } } } if (!self.allowEventDefault && (!allowNativeTouchScrolling || (touchDragAxis && allowNativeTouchScrolling !== touchDragAxis)) && originalEvent.cancelable !== false) { originalEvent.preventDefault(); if (originalEvent.preventManipulation) { //for some Microsoft browsers originalEvent.preventManipulation(); } } } if (self.autoScroll) { checkAutoScrollBounds = true; } setPointerPosition(e.pageX, e.pageY); }, setPointerPosition = function(pointerX, pointerY) { var dragTolerance = 1 - self.dragResistance, edgeTolerance = 1 - self.edgeResistance, xChange, yChange, x, y, dif, temp; self.pointerX = pointerX; self.pointerY = pointerY; if (rotationMode) { y = Math.atan2(rotationOrigin.y - pointerY, pointerX - rotationOrigin.x) * _RAD2DEG; dif = self.y - y; self.y = y; if (dif > 180) { startElementY -= 360; } else if (dif < -180) { startElementY += 360; } x = startElementX + (startElementY - y) * dragTolerance; } else { if (matrix) { temp = pointerX * matrix[0] + pointerY * matrix[2] + matrix[4]; pointerY = pointerX * matrix[1] + pointerY * matrix[3] + matrix[5]; pointerX = temp; } yChange = (pointerY - startPointerY); xChange = (pointerX - startPointerX); if (yChange < minimumMovement && yChange > -minimumMovement) { yChange = 0; } if (xChange < minimumMovement && xChange > -minimumMovement) { xChange = 0; } if ((self.lockAxis || self.lockedAxis) && (xChange || yChange)) { temp = self.lockedAxis; if (!temp) { self.lockedAxis = temp = (allowX && Math.abs(xChange) > Math.abs(yChange)) ? "y" : allowY ? "x" : null; if (temp && typeof(self.vars.onLockAxis) === "function") { self.vars.onLockAxis.call(self, self.pointerEvent); } } if (temp === "y") { yChange = 0; } else if (temp === "x") { xChange = 0; } } x = startElementX + xChange * dragTolerance; y = startElementY + yChange * dragTolerance; } if ((snapX || snapY || snapXY) && (self.x !== x || (self.y !== y && !rotationMode))) { if (snapXY) { _temp1.x = x; _temp1.y = y; temp = snapXY(_temp1); x = temp.x; y = temp.y; } if (snapX) { x = snapX(x); } if (snapY) { y = snapY(y); } } else if (hasBounds) { if (x > maxX) { x = maxX + (x - maxX) * edgeTolerance; } else if (x < minX) { x = minX + (x - minX) * edgeTolerance; } if (!rotationMode) { if (y > maxY) { y = maxY + (y - maxY) * edgeTolerance; } else if (y < minY) { y = minY + (y - minY) * edgeTolerance; } } } if (!rotationMode) { x = Math.round(x); //helps work around an issue with some Win Touch devices y = Math.round(y); } if (self.x !== x || (self.y !== y && !rotationMode)) { if (rotationMode) { self.endRotation = self.x = self.endX = x; dirty = true; } else { if (allowY) { self.y = self.endY = y; dirty = true; //a flag that indicates we need to render the target next time the TweenLite.ticker dispatches a "tick" event (typically on a requestAnimationFrame) - this is a performance optimization (we shouldn't render on every move because sometimes many move events can get dispatched between screen refreshes, and that'd be wasteful to render every time) } if (allowX) { self.x = self.endX = x; dirty = true; } } if (!self.isDragging && self.isPressed) { self.isDragging = true; _dispatchEvent(self, "dragstart", "onDragStart"); } } }, //called when the mouse/touch is released onRelease = function(e, force) { if (!enabled || !self.isPressed || (e && touchID != null && !force && ((e.pointerId && e.pointerId !== touchID) || (e.changedTouches && !_hasTouchID(e.changedTouches, touchID))))) { //for some Microsoft browsers, we must attach the listener to the doc rather than the trigger so that when the finger moves outside the bounds of the trigger, things still work. So if the event we're receiving has a pointerId that doesn't match the touchID, ignore it (for multi-touch) return; } self.isPressed = false; var originalEvent = e, wasDragging = self.isDragging, placeholderDelayedCall = TweenLite.delayedCall(0.001, removePlaceholder), touches, i, syntheticEvent, eventTarget, syntheticClick; if (touchEventTarget) { _removeListener(touchEventTarget, "touchend", onRelease); _removeListener(touchEventTarget, "touchmove", onMove); _removeListener(touchEventTarget, "touchcancel", onRelease); _removeListener(_doc, "touchstart", _onMultiTouchDocument); } else { _removeListener(_doc, "mousemove", onMove); } _removeListener(_doc, "mouseup", onRelease); if (e && e.target) { _removeListener(e.target, "mouseup", onRelease); } dirty = false; if (isClicking) { if (e) { _removeListener(e.target, "change", onRelease); } _setSelectable(triggers, false); _dispatchEvent(self, "release", "onRelease"); _dispatchEvent(self, "click", "onClick"); isClicking = false; return; } _removeFromRenderQueue(render); if (!rotationMode) { i = triggers.length; while (--i > -1) { _setStyle(triggers[i], "cursor", vars.cursor || "move"); } } if (wasDragging) { dragEndTime = _lastDragTime = _getTime(); self.isDragging = false; } _dragCount--; if (e) { if (_isOldIE) { e = _populateIEEvent(e, false); } touches = e.changedTouches; if (touches) { //touch events store the data slightly differently e = touches[0]; if (e !== touch && e.identifier !== touchID) { //Usually changedTouches[0] will be what we're looking for, but in case it's not, look through the rest of the array...(and Android browsers don't reuse the event like iOS) i = touches.length; while (--i > -1 && (e = touches[i]).identifier !== touchID) {} if (i < 0) { return; } } } self.pointerEvent = originalEvent; self.pointerX = e.pageX; self.pointerY = e.pageY; } if (originalEvent && !wasDragging) { if (interrupted && (vars.snap || vars.bounds)) { //otherwise, if the user clicks on the object while it's animating to a snapped position, and then releases without moving 3 pixels, it will just stay there (it should animate/snap) animate(vars.throwProps); } _dispatchEvent(self, "release", "onRelease"); if (!_isAndroid || originalEvent.type !== "touchmove") { //to accommodate native scrolling on Android devices, we have to immediately call onRelease() on the first touchmove event, but that shouldn't trigger a "click". _dispatchEvent(self, "click", "onClick"); eventTarget = originalEvent.target || originalEvent.srcElement || target; //old IE uses srcElement clickTime = _getTime(); syntheticClick = function() { // some browsers (like Firefox) won't trust script-generated clicks, so if the user tries to click on a video to play it, for example, it simply won't work. Since a regular "click" event will most likely be generated anyway (one that has its isTrusted flag set to true), we must slightly delay our script-generated click so that the "real"/trusted one is prioritized. Remember, when there are duplicate events in quick succession, we suppress all but the first one. Some browsers don't even trigger the "real" one at all, so our synthetic one is a safety valve that ensures that no matter what, a click event does get dispatched. if (clickTime !== clickDispatch && self.enabled() && !self.isPressed) { if (eventTarget.click) { //some browsers (like mobile Safari) don't properly trigger the click event eventTarget.click(); } else if (_doc.createEvent) { syntheticEvent = _doc.createEvent("MouseEvents"); syntheticEvent.initMouseEvent("click", true, true, window, 1, self.pointerEvent.screenX, self.pointerEvent.screenY, self.pointerX, self.pointerY, false, false, false, false, 0, null); eventTarget.dispatchEvent(syntheticEvent); } } }; if (!_isAndroid && !originalEvent.defaultPrevented) { //iOS Safari requires the synthetic click to happen immediately or else it simply won't work, but Android doesn't play nice. TweenLite.delayedCall(0.00001, syntheticClick); //in addition to the iOS bug workaround, there's a Firefox issue with clicking on things like a video to play, so we must fake a click event in a slightly delayed fashion. Previously, we listened for the "click" event with "capture" false which solved the video-click-to-play issue, but it would allow the "click" event to be dispatched twice like if you were using a jQuery.click() because that was handled in the capture phase, thus we had to switch to the capture phase to avoid the double-dispatching, but do the delayed synthetic click. } } } else { animate(vars.throwProps); //will skip if throwProps isn't defined or ThrowPropsPlugin isn't loaded. if (!_isOldIE && !self.allowEventDefault && originalEvent && (vars.dragClickables || !isClickable.call(self, originalEvent.target)) && wasDragging && (!allowNativeTouchScrolling || (touchDragAxis && allowNativeTouchScrolling === touchDragAxis)) && originalEvent.cancelable !== false) { originalEvent.preventDefault(); if (originalEvent.preventManipulation) { originalEvent.preventManipulation(); //for some Microsoft browsers } } _dispatchEvent(self, "release", "onRelease"); } if (isTweening()) { placeholderDelayedCall.duration( self.tween.duration() ); //sync the timing so that the placeholder DIV gets } if (wasDragging) { _dispatchEvent(self, "dragend", "onDragEnd"); } return true; }, updateScroll = function(e) { if (e && self.isDragging && !scrollProxy) { var parent = e.target || e.srcElement || target.parentNode, deltaX = parent.scrollLeft - parent._gsScrollX, deltaY = parent.scrollTop - parent._gsScrollY; if (deltaX || deltaY) { if (matrix) { startPointerX -= deltaX * matrix[0] + deltaY * matrix[2]; startPointerY -= deltaY * matrix[3] + deltaX * matrix[1]; } else { startPointerX -= deltaX; startPointerY -= deltaY; } parent._gsScrollX += deltaX; parent._gsScrollY += deltaY; setPointerPosition(self.pointerX, self.pointerY); } } }, onClick = function(e) { //this was a huge pain in the neck to align all the various browsers and their behaviors. Chrome, Firefox, Safari, Opera, Android, and Microsoft Edge all handle events differently! Some will only trigger native behavior (like checkbox toggling) from trusted events. Others don't even support isTrusted, but require 2 events to flow through before triggering native behavior. Edge treats everything as trusted but also mandates that 2 flow through to trigger the correct native behavior. var time = _getTime(), recentlyClicked = (time - clickTime < 40), recentlyDragged = (time - dragEndTime < 40), alreadyDispatched = (recentlyClicked && clickDispatch === clickTime), isModern = !!e.preventDefault, defaultPrevented = (self.pointerEvent && self.pointerEvent.defaultPrevented), alreadyDispatchedTrusted = (recentlyClicked && trustedClickDispatch === clickTime), trusted = e.isTrusted || (e.isTrusted == null && recentlyClicked && alreadyDispatched); //note: Safari doesn't support isTrusted, and it won't properly execute native behavior (like toggling checkboxes) on the first synthetic "click" event - we must wait for the 2nd and treat it as trusted (but stop propagation at that point). Confusing, I know. Don't you love cross-browser compatibility challenges? if (isModern && (alreadyDispatched || (recentlyDragged && self.vars.suppressClickOnDrag !== false) )) { e.stopImmediatePropagation(); } if (recentlyClicked && !(self.pointerEvent && self.pointerEvent.defaultPrevented) && (!alreadyDispatched || (trusted !== alreadyDispatchedTrusted))) { //let the first click pass through unhindered. Let the next one only if it's trusted, then no more (stop quick-succession ones) if (trusted && alreadyDispatched) { trustedClickDispatch = clickTime; } clickDispatch = clickTime; return; } if (self.isPressed || recentlyDragged || recentlyClicked) { if (!isModern) { e.returnValue = false; } else if (!trusted || !e.detail || !recentlyClicked || defaultPrevented) { e.preventDefault(); if (e.preventManipulation) { e.preventManipulation(); //for some Microsoft browsers } } } }; old = Draggable.get(this.target); if (old) { old.kill(); // avoids duplicates (an element can only be controlled by one Draggable) } //give the user access to start/stop dragging... this.startDrag = function(e) { onPress(e); if (!self.isDragging) { self.isDragging = true; _dispatchEvent(self, "dragstart", "onDragStart"); } }; this.drag = onMove; this.endDrag = function(e) { onRelease(e, true); }; this.timeSinceDrag = function() { return self.isDragging ? 0 : (_getTime() - dragEndTime) / 1000; }; this.hitTest = function(target, threshold) { return Draggable.hitTest(self.target, target, threshold); }; this.getDirection = function(from, diagonalThreshold) { //from can be "start" (default), "velocity", or an element var mode = (from === "velocity" && ThrowPropsPlugin) ? from : (typeof(from) === "object" && !rotationMode) ? "element" : "start", xChange, yChange, ratio, direction, r1, r2; if (mode === "element") { r1 = _parseRect(self.target); r2 = _parseRect(from); } xChange = (mode === "start") ? self.x - startElementX : (mode === "velocity") ? ThrowPropsPlugin.getVelocity(this.target, xProp) : (r1.left + r1.width / 2) - (r2.left + r2.width / 2); if (rotationMode) { return xChange < 0 ? "counter-clockwise" : "clockwise"; } else { diagonalThreshold = diagonalThreshold || 2; yChange = (mode === "start") ? self.y - startElementY : (mode === "velocity") ? ThrowPropsPlugin.getVelocity(this.target, yProp) : (r1.top + r1.height / 2) - (r2.top + r2.height / 2); ratio = Math.abs(xChange / yChange); direction = (ratio < 1 / diagonalThreshold) ? "" : (xChange < 0) ? "left" : "right"; if (ratio < diagonalThreshold) { if (direction !== "") { direction += "-"; } direction += (yChange < 0) ? "up" : "down"; } } return direction; }; this.applyBounds = function(newBounds) { var x, y, forceZeroVelocity, e, parent, isRoot; if (newBounds && vars.bounds !== newBounds) { vars.bounds = newBounds; return self.update(true); } syncXY(true); calculateBounds(); if (hasBounds) { x = self.x; y = self.y; if (x > maxX) { x = maxX; } else if (x < minX) { x = minX; } if (y > maxY) { y = maxY; } else if (y < minY) { y = minY; } if (self.x !== x || self.y !== y) { forceZeroVelocity = true; self.x = self.endX = x; if (rotationMode) { self.endRotation = x; } else { self.y = self.endY = y; } dirty = true; render(true); if (self.autoScroll && !self.isDragging) { _recordMaxScrolls(target.parentNode); e = target; _windowProxy.scrollTop = ((window.pageYOffset != null) ? window.pageYOffset : (_docElement.scrollTop != null) ? _docElement.scrollTop : _doc.body.scrollTop); _windowProxy.scrollLeft = ((window.pageXOffset != null) ? window.pageXOffset : (_docElement.scrollLeft != null) ? _docElement.scrollLeft : _doc.body.scrollLeft); while (e && !isRoot) { //walk up the chain and sense wherever the scrollTop/scrollLeft exceeds the maximum. isRoot = _isRoot(e.parentNode); parent = isRoot ? _windowProxy : e.parentNode; if (allowY && parent.scrollTop > parent._gsMaxScrollY) { parent.scrollTop = parent._gsMaxScrollY; } if (allowX && parent.scrollLeft > parent._gsMaxScrollX) { parent.scrollLeft = parent._gsMaxScrollX; } e = parent; } } } if (self.isThrowing && (forceZeroVelocity || self.endX > maxX || self.endX < minX || self.endY > maxY || self.endY < minY)) { animate(vars.throwProps, forceZeroVelocity); } } return self; }; this.update = function(applyBounds, sticky, ignoreExternalChanges) { var x = self.x, y = self.y; updateMatrix(!sticky); if (applyBounds) { self.applyBounds(); } else { if (dirty && ignoreExternalChanges) { render(true); } syncXY(true); } if (sticky) { setPointerPosition(self.pointerX, self.pointerY); if (dirty) { render(true); } } if (self.isPressed && !sticky && ((allowX && Math.abs(x - self.x) > 0.01) || (allowY && (Math.abs(y - self.y) > 0.01 && !rotationMode)))) { recordStartPositions(); } if (self.autoScroll) { _recordMaxScrolls(target.parentNode); checkAutoScrollBounds = self.isDragging; render(true); } if (self.autoScroll) { //in case reparenting occurred. _removeScrollListener(target, updateScroll); _addScrollListener(target, updateScroll); } return self; }; this.enable = function(type) { var id, i, trigger; if (type !== "soft") { i = triggers.length; while (--i > -1) { trigger = triggers[i]; _addListener(trigger, "mousedown", onPress); _addListener(trigger, "touchstart", onPress); _addListener(trigger, "click", onClick, true); //note: used to pass true for capture but it prevented click-to-play-video functionality in Firefox. if (!rotationMode) { _setStyle(trigger, "cursor", vars.cursor || "move"); } _setStyle(trigger, "touchCallout", "none"); _setStyle(trigger, "touchAction", (allowX === allowY) ? "none" : allowX ? "pan-y" : "pan-x"); } _setSelectable(triggers, false); } _addScrollListener(target, updateScroll); enabled = true; if (ThrowPropsPlugin && type !== "soft") { ThrowPropsPlugin.track(scrollProxy || target, (xyMode ? "x,y" : rotationMode ? "rotation" : "top,left")); } if (scrollProxy) { scrollProxy.enable(); } target._gsDragID = id = "d" + (_lookupCount++); _lookup[id] = this; if (scrollProxy) { scrollProxy.element._gsDragID = id; } TweenLite.set(target, {x:"+=0", overwrite:false}); //simply ensures that there's a _gsTransform on the element. applyObj = { t:target, data:_isOldIE ? cssVars : target._gsTransform, tween:{}, setRatio:(_isOldIE ? function() { TweenLite.set(target, tempVars); } : CSSPlugin._internals.setTransformRatio || CSSPlugin._internals.set3DTransformRatio) }; recordStartPositions(); self.update(true); return self; }; this.disable = function(type) { var dragging = self.isDragging, i, trigger; if (!rotationMode) { i = triggers.length; while (--i > -1) { _setStyle(triggers[i], "cursor", null); } } if (type !== "soft") { i = triggers.length; while (--i > -1) { trigger = triggers[i]; _setStyle(trigger, "touchCallout", null); _setStyle(trigger, "touchAction", null); _removeListener(trigger, "mousedown", onPress); _removeListener(trigger, "touchstart", onPress); _removeListener(trigger, "click", onClick); } _setSelectable(triggers, true); if (touchEventTarget) { _removeListener(touchEventTarget, "touchcancel", onRelease); _removeListener(touchEventTarget, "touchend", onRelease); _removeListener(touchEventTarget, "touchmove", onMove); } _removeListener(_doc, "mouseup", onRelease); _removeListener(_doc, "mousemove", onMove); } _removeScrollListener(target, updateScroll); enabled = false; if (ThrowPropsPlugin && type !== "soft") { ThrowPropsPlugin.untrack(scrollProxy || target, (xyMode ? "x,y" : rotationMode ? "rotation" : "top,left")); } if (scrollProxy) { scrollProxy.disable(); } _removeFromRenderQueue(render); self.isDragging = self.isPressed = isClicking = false; if (dragging) { _dispatchEvent(self, "dragend", "onDragEnd"); } return self; }; this.enabled = function(value, type) { return arguments.length ? (value ? self.enable(type) : self.disable(type)) : enabled; }; this.kill = function() { self.isThrowing = false; TweenLite.killTweensOf(scrollProxy || target, true, killProps); self.disable(); delete _lookup[target._gsDragID]; return self; }; if (type.indexOf("scroll") !== -1) { scrollProxy = this.scrollProxy = new ScrollProxy(target, _extend({onKill:function() { //ScrollProxy's onKill() gets called if/when the ScrollProxy senses that the user interacted with the scroll position manually (like using the scrollbar). IE9 doesn't fire the "mouseup" properly when users drag the scrollbar of an element, so this works around that issue. if (self.isPressed) { onRelease(null); }}}, vars)); //a bug in many Android devices' stock browser causes scrollTop to get forced back to 0 after it is altered via JS, so we set overflow to "hidden" on mobile/touch devices (they hide the scroll bar anyway). That works around the bug. (This bug is discussed at https://code.google.com/p/android/issues/detail?id=19625) target.style.overflowY = (allowY && !_isTouchDevice) ? "auto" : "hidden"; target.style.overflowX = (allowX && !_isTouchDevice) ? "auto" : "hidden"; target = scrollProxy.content; } if (vars.force3D !== false) { TweenLite.set(target, {force3D:true}); //improve performance by forcing a GPU layer when possible } if (rotationMode) { killProps.rotation = 1; } else { if (allowX) { killProps[xProp] = 1; } if (allowY) { killProps[yProp] = 1; } } if (rotationMode) { tempVars = _tempVarsRotation; cssVars = tempVars.css; tempVars.overwrite = false; } else if (xyMode) { tempVars = (allowX && allowY) ? _tempVarsXY : allowX ? _tempVarsX : _tempVarsY; cssVars = tempVars.css; tempVars.overwrite = false; } this.enable(); }, p = Draggable.prototype = new EventDispatcher(); p.constructor = Draggable; p.pointerX = p.pointerY = p.startX = p.startY = p.deltaX = p.deltaY = 0; p.isDragging = p.isPressed = false; Draggable.version = "0.15.0"; Draggable.zIndex = 1000; _addListener(_doc, "touchcancel", function() { //some older Android devices intermittently stop dispatching "touchmove" events if we don't listen for "touchcancel" on the document. Very strange indeed. }); _addListener(_doc, "contextmenu", function(e) { var p; for (p in _lookup) { if (_lookup[p].isPressed) { _lookup[p].endDrag(); } } }); Draggable.create = function(targets, vars) { if (typeof(targets) === "string") { targets = TweenLite.selector(targets); } var a = (!targets || targets.length === 0) ? [] : _isArrayLike(targets) ? _flattenArray(targets) : [targets], i = a.length; while (--i > -1) { a[i] = new Draggable(a[i], vars); } return a; }; Draggable.get = function(target) { return _lookup[(_unwrapElement(target) || {})._gsDragID]; }; Draggable.timeSinceDrag = function() { return (_getTime() - _lastDragTime) / 1000; }; var _tempRect = {}, //reuse to reduce garbage collection tasks _oldIERect = function(e) { //IE8 doesn't support getBoundingClientRect(), so we use this as a backup. var top = 0, left = 0, width, height; e = _unwrapElement(e); width = e.offsetWidth; height = e.offsetHeight; while(e) { top += e.offsetTop; left += e.offsetLeft; e = e.offsetParent; } return {top: top, left: left, width: width, height: height}; }, _parseRect = function(e, undefined) { //accepts a DOM element, a mouse event, or a rectangle object and returns the corresponding rectangle with left, right, width, height, top, and bottom properties if (e === window) { _tempRect.left = _tempRect.top = 0; _tempRect.width = _tempRect.right = _docElement.clientWidth || e.innerWidth || _doc.body.clientWidth || 0; _tempRect.height = _tempRect.bottom = ((e.innerHeight || 0) - 20 < _docElement.clientHeight) ? _docElement.clientHeight : e.innerHeight || _doc.body.clientHeight || 0; return _tempRect; } var r = (e.pageX !== undefined) ? {left:e.pageX - _getDocScrollLeft(), top:e.pageY - _getDocScrollTop(), right:e.pageX - _getDocScrollLeft() + 1, bottom:e.pageY - _getDocScrollTop() + 1} : (!e.nodeType && e.left !== undefined && e.top !== undefined) ? e : _isOldIE ? _oldIERect(e) : _unwrapElement(e).getBoundingClientRect(); if (r.right === undefined && r.width !== undefined) { r.right = r.left + r.width; r.bottom = r.top + r.height; } else if (r.width === undefined) { //some browsers don't include width and height properties. We can't just set them directly on r because some browsers throw errors, so create a new generic object. r = {width: r.right - r.left, height: r.bottom - r.top, right: r.right, left: r.left, bottom: r.bottom, top: r.top}; } return r; }; Draggable.hitTest = function(obj1, obj2, threshold) { if (obj1 === obj2) { return false; } var r1 = _parseRect(obj1), r2 = _parseRect(obj2), isOutside = (r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top), overlap, area, isRatio; if (isOutside || !threshold) { return !isOutside; } isRatio = ((threshold + "").indexOf("%") !== -1); threshold = parseFloat(threshold) || 0; overlap = {left:Math.max(r1.left, r2.left), top:Math.max(r1.top, r2.top)}; overlap.width = Math.min(r1.right, r2.right) - overlap.left; overlap.height = Math.min(r1.bottom, r2.bottom) - overlap.top; if (overlap.width < 0 || overlap.height < 0) { return false; } if (isRatio) { threshold *= 0.01; area = overlap.width * overlap.height; return (area >= r1.width * r1.height * threshold || area >= r2.width * r2.height * threshold); } return (overlap.width > threshold && overlap.height > threshold); }; _placeholderDiv.style.cssText = "visibility:hidden;height:1px;top:-1px;pointer-events:none;position:relative;clear:both;"; return Draggable; }, true); }); Eif (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite", "CSSPlugin"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); require("../plugins/CSSPlugin.js"); module.exports = getGlobal(); } }("Draggable")); |